React select 选项更改时不调用 onChange

Question

我的组件中有一个 <select>，其中选项列表根据状态进行过滤，并且没有进行任何初始化。

render() {
  <select value={this.state.time} className='input' onChange={e => this.setState({time: e.target.value})} disabled={!this.state.date} >
    { availableDates.filter(d => moment(d).format('YYYY-MM-DD') === this.state.date).map(d =>
       <option key={d} value={moment(d).format('H:mm')}>{moment(d).format('H:mm')}</option>
    )}
</select>
}

表示只要this.state.date是null，select就没有option。那么设置date的时候，大部分时候只有一个值。在显示屏上，它立即变为 selected。

但是 onChange 没有被触发，而且永远不会被触发（即使我明确地 select 值）。

这是预期的行为吗？不知何故，我会说值 changed 所以 onChange 应该被触发，不是吗？

此外，我怎样才能让它工作呢？即使没有选项，我也需要显示 select ...

Answer 1

是的，状态值已更改，但 select 的更改事件实际上并没有，它只是 re-rendered 获得了新值。

此外，大多数浏览器在 re-selecting 当前值时不会触发更改事件（但如果我没记错的话，一些旧的 IE 会触发）。

因此，我认为这是预期的行为。

为了让它工作，在设置日期状态的代码中，它还可以设置默认时间值。这是有道理的，因为您想在日期更改时设置时间。

附带说明，根据您的实施方式，您可能需要查看 uncontrolled components.

React select 选项更改时不调用 onChange

React select onChange not called when options change

html-select

reactjs