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。

选项更改时，React select onChange未调用

1 个答案: