ReactJS 中 <select> 标签的 onChange 事件的替代方案？答案

【问题标题】：Alternative for onChange event for <select> tag in ReactJS?ReactJS 中 <select> 标签的 onChange 事件的替代方案？
【发布时间】：2016-11-23 08:21:59
【问题描述】：

我正在创建一个包含多个 <select> 标记的组件。根据选定的选项，它获取下一个标签的选项。我正在使用 onChange 事件。我面临的问题是，如果只有 1 个选项，那么永远不会触发 onChange。

ReactJS 中是否有任何事件，例如onSelect，我可以使用它来实现这一点，或者有什么更好的方法？

【问题讨论】：

jsfiddle.net/54oee43q 这种方法的问题是，它不是通用的。相信我，我都试过了。假设用户打开选项下拉列表onClick 将被触发，这里他/她没有选择任何东西。当他/她选择任何东西时，onClick 不会被调用。当再次点击时，我们得到了价值。这不是预期的行为。他/她应该只点击一次，函数取值。
我会使用onChange + onFocus，然后在其选项更新后在下一个选择元素上调用.focus()。如果只有一个选项，请继续更新下一个元素。或者，您可以使用空值和文本的第一个选项，例如 --choose--，这样即使只有一个选项可供选择，它也会迫使用户做出选择。

标签： javascript html reactjs

【解决方案1】：

您能不能将第一个选项设为禁用的占位符，如下所示：

<option disabled selected value> -- select an option -- </option>

这样用户将不得不触发提取。

如果您需要默认状态，您可以在选择框之外进行处理。

【讨论】：

很高兴我能帮上忙 :-)