如何在ReactJS中动态设置JavaScript中选择下拉列表的值

Question

我有一个选择标签，看起来像这样：

    <select id="bookName"
     onChange={(event) => this.props.handleShelfChange(this.props.book, event.target.value)}>
        <option value="moveTo" disabled>Move to...</option>
        <option value="currentlyReading">Currently Reading</option>
        <option value="wantToRead">Want to Read</option>
        <option value="read">Read</option>
        <option value="none">None</option>
   </select>

因此，在这里，我从另一个组件接收道具。 因此，道具之一是{this.props.book.shelf} 。该道具有4个值：

1. 当前正在阅读，
2. 想读，
3. 阅读和
4. 没有。

所以，我想要的是根据来自父组件的props的值，默认情况下应该选择select选项的值。 如何才能做到这一点？

Answer 1

只需将selected属性传递给所有这样的option标签

<option selected={this.props.book.shelf === "read"} value="read">Read</option>

Answer 2

我建议使用类似组件的方法。

const elems = ['read', 'wantToRead', 'currentlyReading', 'moveTo'];

export default ({ name, value, book: { shelf } }) => (
  <select>
    {elems.map((v) => (
      <Option value={v} selected={shelf} /> // value coming from prop
    ))}
  </select>
);

const Option = ({ value, selected }) => (
  <option value={value} selected={value === selected}>{value}</option>
);

Codesandbox链接： https ：//codesandbox.io/s/x9m9nx5ynp