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个值：

CurrentlyReading，
wantToRead，
阅读并
无。

所以，我想要的是根据来自父组件的道具的值，默认情况下应该选择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

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

2 个答案: