选项更改时不调用反应选择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的change事件实际上并没有，只是使用新值重新呈现了它。

此外，大多数浏览器在重新选择当前值时不会触发change事件（但是，如果我正确地记得它，则某些旧的IE会触发）。

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

为了使其工作，在设置日期状态的代码中，还可以设置默认时间值。 这很有意义，因为您想设置日期更改的时间。

附带说明一下，根据实现方式的不同，您可能需要查看不受控制的组件 。