javascript - 设置数据列表的默认值不允许用户更改选择

Question

我有一个数据列表，我想根据我正在传递的 Prop 预先填充该数据列表。它正确设置该值，但不允许更改下拉值并且基本上禁用它。关于如何解决这个问题有什么想法吗？

<input list="facilitators" name="facilitator" id="facilitatorsInput" value={this.props.breakout.facilitatorId}></input>
<datalist id="facilitators">
  {
   this.state.facilitators.map((facilitator) => <option value={facilitator.id} >{facilitator.firstName} {facilitator.lastName}</option>)
  }
</datalist>

Answer 1

看起来您正在设置该值，但您无法更改该值。您的<input />需要一个 onChange 处理程序。

这是一个工作示例:https://codesandbox.io/s/xrv9q019zo

const options = ["banana", "tomato", "apple"];

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: "banana"
    };
  }
  render() {
    return (
      <div className="App">
        <input
          onChange={e => {
            this.setState({ input: e.target.value });
          }}
          value={this.state.input}
          list="stuff"
        />
        <datalist id="stuff">
          {options.map(opt => (
            <option value={opt} />
          ))}
        </datalist>
      </div>
    );
  }
}

如果您从父组件获取默认值，您可能需要从父组件传递 onChange 处理程序并管理那里的状态。