Javascript 设置datalist的默认值不允许用户更改选择

我有一个数据列表，我想根据我传递的道具预先填充它。它正确设置值，但不允许更改下拉值，基本上禁用它。有没有办法解决这个问题

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

{
this.state.facilitators.map（（facilitator）=>{facilitator.firstName}{facilitator.lastName}）
}

看起来您正在设置值，但无法更改值。您的

需要一个onChange处理程序

下面是一个工作示例：

const options=[“香蕉”、“番茄”、“苹果”]；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入：“香蕉”
};
}
render（）{
返回(
{
this.setState（{input:e.target.value}）；
}}
值={this.state.input}
list=“stuff”
/>
{options.map（opt=>(
))}
);
}
}