使用動態生成的選項為 Select 響應 defaultValue

Question

使用 defaultValue 或 value 道具而不是設置 selected on 。

<select defaultValue="react">
 <option value="react">React</option>
 <option value="angular">Angular</option>
</select>

defaultValue 將與上述選擇標簽一起使用。 但是，它似乎不適用於循環生成的選項。

<select defaultValue={selectedOptionId}>
{option_id.map(id =>
  <option key={id} value={id}>{options[id].name}</option>
)}
</select>

可能在聲明 defaultValue 時沒有完全設置選項？

我可以在componentDidUpdate()和onChange事件中進行手動分配。

但我的問題是 - 有沒有更清潔（更好）的方法來解決它？

謝謝。

Answer 1

這是舊的，但由於答案 #1 與受控Select相關，而問題似乎與不受控制的Select相關，我認為值得為未來的讀者留下一些行：

問題在於，對於uncontrolled組件，React 需要在第一次渲染之前知道有哪些options ，因為從那時起defaultValue不會覆蓋Select的當前值。 這意味着如果您在options之前渲染Select ，它將不知道要選擇什么。

您可以在options可用之前解決避免render的問題：

const RenderConditionally = ({ options, selected }) => options.length > 0 ? (
  <select defaultValue={selected}>
   {options.map(item => (
     <option key={item.id} value={item.value}>{item.label}</option>
   ))}
  </select>
) : null;

如果您願意，也可以不使用三元：

const RenderConditionally = ({ options, selected }) => {
  if (options.length === 0) {
    return null;
  }

  return (
    <select defaultValue={selected}>
      {options.map(item => (
        <option key={item.id} value={item.value}>{item.label}</option>
      ))}
    </select>
  );
};

Answer 2

對於遇到此問題的用戶，您可以通過使用value defaultValue而不是defaultValue來獲得所需的功能，例如：

<select value={selectedOptionId}>
  {option_id.map(id =>
    <option key={id} value={id}>{options[id].name}</option>
  )}
</select>

Answer 3

很可能您對option_id和options數組結構或selectedOptionId變量有問題。 您構建選擇組件的方式是可以的。

我做了一個小提琴，這段代碼可以正常工作：

render: function() {
let option_id = [0, 1];
let options = [{name: 'a'}, {name: 'b'}];
let selectedOptionId = 1
return (
  <select defaultValue={selectedOptionId}>
    {option_id.map(id =>
    <option key={id} value={id}>{options[id].name}</option>
    )}
  </select>
)

}