选项更改时，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时，大部分时间只有一个值。在显示屏上，它会立即被选中。

但onChange没有触发，也从未触发过（即使我明确选择了值）。

这是预期的行为吗？不知怎的，我会说价值改变所以应该触发onChange，不是吗？

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

Answer 1

是的，状态值已更改，但是select的更改事件实际上并非如此，它只是使用新值重新呈现。

此外，大多数浏览器在重新选择当前值时不会触发更改事件（但如果我正确地记得它，那么一些旧的IE会这样做）。

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

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

作为旁注，根据你将如何实现它，你可能想看看uncontrolled components。