Question

我有一个数据列表，希望根据我要传递的道具进行预填充。它会正确设置该值，但不允许更改下拉值，并且基本上禁用了该值。有关如何解决此问题的任何想法？

<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处理程序并在那里管理状态。

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

1 个答案: