操作方法：子组件中 <select> 的 <option> 的 onClick/onChange答案

【问题标题】：How To: onClick/onChange for a <select>'s <option> in a child component操作方法：子组件中 <select> 的 <option> 的 onClick/onChange
【发布时间】：2017-01-15 23:58:47
【问题描述】：

有没有办法让一个子组件只呈现一个<option> 标签来触发它的父<select> 的onChange？

我问是因为我在孩子<option> 上尝试过onClick 和onChange，这似乎对他们很冷漠。

这个想法是一个看起来像这样的父 React 组件：

render() {
  return (
    <select value={this.state.value} onChange={this.handleChange}>
      <ChildOption onClick={this.handleChange}
    </select>
  );
}

还有这样的 ChildOption 组件：

render() {
  return (
    <option onClick={this.handleClick} />
  );
}

此问题的完整代码在 CodePen 中（假设它返回一个 <option>s 数组：

http://codepen.io/mikeumus/pen/BpzeYO?editors=0010

Cloud9 中的真实世界代码：

https://ide.c9.io/mikeumus/ca-blinds#imports/plugins/included/product-detail-simple/client/components/variantList.js:205

【问题讨论】：

浏览器对 onclick for options 的支持非常差。请问您为什么需要这种行为？
我建议您处理 select onChange 上的数据，并根据选项值执行 onClick 选项。
handleClick 是 ChildOption 中的一个东西吗？
@DavinTryon，是的，它在 CodePen 和 C9 中。 @FabianSchultz，那么如何将事件添加到子组件中的一个单独的 <option> 中？ @FabioCosta，我可能误解了你在说什么，但根据我的尝试，onClick 和 onChange 与 React 的事件一起使用 <option> 元素。

标签： reactjs

【解决方案1】：

您可以有一个只呈现option 标记的子组件。您实际上不需要将事件处理程序添加到 option 标记。一旦单击 option 标记（传递它的值），就会自动调用 select onChange 事件。

在此处查看示例：http://codepen.io/anon/pen/oBzzWr?editors=0010

【讨论】：

非常酷，但是为什么在我上面的CodePen 中父onChange 没有触发？
您的onChange 事件不会触发，因为只有一个option。因此，永远不会发生更改事件，因为值始终相同。如果您添加另一个option，那么您的父事件将被调用。