如何:onClick / onChange用于子组件中的<select>的<option>

时间:2017-01-14 20:13:02

标签: reactjs

有没有办法让子组件只呈现&lt;选项&gt;标记用于触发其父级&lt; select&gt;的onChange ? 我问,因为我已尝试onClick和onChange对孩子&lt;选项&gt;而且对他们来说似乎是超然的。 这个想法是一个父React组件,如下所示: render(){   回来(     &lt; select value = {this.state.value} onChange = {this.handleChange}&gt;       &lt; ChildOption onClick = {this.handleChange}     &LT; /选择&GT;   ); } 和像这样的ChildOption组件: render(){   回来(     &lt; option onClick = {this.handleClick} /&gt;   ); } 这个问题的完整代码在CodePen中(假装它返回一个&lt; option&gt;的数组: 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

1 个答案:

答案 0 :(得分:6)

您可以拥有仅呈现#include <iostream> #include <string> #include <utility> std::pair<std::string, std::string> divide(const std::string &s, char c) { std::string::size_type pos = s.find(c); return { s.substr(0, pos), pos == std::string::npos ? "" : s.substr(pos) }; } int main() { std::string text("Hello World"); auto p = divide(text, ' '); std::cout << "\"" << text << "\"\n"; std::cout << "\"" << p.first << "\"\n"; std::cout << "\"" << p.second << "\"\n"; } 标记的子组件。实际上,您不需要向option标记添加事件处理程序。单击option标记后会自动调用select onChange事件(使用它传递值)。

请参阅此处的示例:http://codepen.io/anon/pen/oBzzWr?editors=0010