選項更改時不調用反應選擇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會觸發）。

因此，我相信這是預期的行為。

為了使其工作，在設置日期狀態的代碼中，還可以設置默認時間值。 這很有意義，因為您想設置日期更改的時間。

附帶說明一下，根據實現方式的不同，您可能需要查看不受控制的組件 。