React:如何侦听子组件事件
React: How to listen to child component events
我有一个组件,比方说它包含一个窗体。该窗体有一些子组件,它们本质上是用于输出文本输入和选择菜单的UI小部件。
select菜单组件有点花哨,并使用onChange事件进行一些状态维护。
我的问题是;如何从父(窗体)组件中勾入选择菜单的onChange事件?我不能通过道具传递onChange,因为我已经在select组件中指定了onChange,我不想覆盖它
示例:
var Form = React.createClass({
handleSelectChange: function(){
// Do something when <Select /> changes
},
render: function () {
var selectMenuOptions = [
{label: 'Choose...', value: ''},
{label: 'First option', value: 'one'},
{label: 'Second option', value: 'two'}
];
return (
<form>
<Select name="selectMenu" id="selectMenu" options={selectMenuOptions} />
</form>
);
}
});
var Select = React.createClass({
getDefaultProps: function() {
return {
options: [],
className: "select"
};
},
getInitialState: function () {
return {
buttonText: 'Loading...',
defaultValue: null
};
},
handleChange: function (e) {
// Update buttonText state
},
render: function () {
return (
<div className={this.props.className}>
<div className="select__button">{this.state.buttonText}</div>
<select className="select__selector"
ref="select"
onChange={this.handleChange}>
{this.props.options.map(function(option, i){
return (<Option option={option} key={i} />);
})}
</select>
</div>
);
}
});
使用<Select onChange={...} />
不会覆盖Select的render
方法中的<select onChange={...} />
。它所渲染的<Select/>
分量和<select/>
分量具有完全不同的props
集合。
我认为,最简单的方法是让Select的handleChange
方法调用this.props.onChange
。您可以将handleChange
接收到的e
参数传递给它:
var Form = React.createClass({
handleSelectChange: function(){
// Do something when <Select /> changes
},
render: function () {
// ...
return (
<form>
<Select name="selectMenu"
id="selectMenu"
options={selectMenuOptions}
onChange={this.handleSelectChange} />
</form>
);
}
});
var Select = React.createClass({
// ...
handleChange: function (e) {
if (this.props.onChange) {
this.props.onChange(e);
}
// Update buttonText state
},
render: function () {
return (
<div className={this.props.className}>
<div className="select__button">{this.state.buttonText}</div>
<select className="select__selector"
ref="select"
onChange={this.handleChange}>
{this.props.options.map(function(option, i){
return (<Option option={option} key={i} />);
})}
</select>
</div>
);
}
});
相关文章:
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 单元测试:使用酶模拟父组件中子组件的点击事件
- React/flux - 子组件用户事件 - 是否应通过调度程序路由所有内容
- React:如何侦听子组件事件
- 将事件绑定到其他UI组件's函数,在Kendo MVVM中
- 如何更新angular2中组件之间的事件数据
- 点击tpl链接时,ExtJS 4.2自定义组件触发事件
- 反应:在嵌套组件上冒泡点击事件
- 如何根据其他组件中的事件更新组件URL
- 使用Ember中的组件生命周期事件
- 如何将事件绑定到模式对话框上的组件
- 将事件处理程序推送到父组件
- React,在组件事件上呈现消息的最佳方法
- 如何确定Twitter引导组件事件的来源
- 取消ExtJS组件事件
- Ember:嵌套组件事件冒泡
- 获取飞行组件事件的委托目标
- EmberJS嵌套组件事件
- Angular js文本Angular组件事件上键
- ExtJS“创建”或“初始化”组件事件侦听器