javascript - 使用动态生成的选项为 Select react defaultValue

Question

使用 defaultValue 或 value Prop on 而不是设置 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 与controlled Select 相关，而且问题似乎与uncontrolled 选择 我认为值得为 future 的读者留下几行:

问题是对于不受控制的组件，React需要知道选项是什么在第一次渲染之前，因为从那一刻起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>
  );
};