Question

使用defaultValue或值props而不是设置选中。

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

defaultValue适用于上面的select标记。但是，它似乎不适用于循环生成的选项。

<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将不会t覆盖Select的当前值。这意味着，如果在Select之前渲染options，它将不知道要选择什么。

您可以解决以下问题，避免在render可用之前就options：

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

很可能您对option_id和options数组结构或selectedOptionId变量有问题。构建select组件的方式还可以。

我已经制作了fiddle，其中此代码可以正常使用：

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>
)

}

Answer 3

对于遇到此问题的用户，您可以使用value道具而不是defaultValue来获得所需的功能，例如：

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

使用动态生成的选项

3 个答案: