我正在ReactReact中迈出第一步,并试图理解父母与孩子之间的交流。我正在制作表格,所以我有用于样式字段的组件。而且我还有包含字段并对其进行检查的父组件。例:
var LoginField = React.createClass({ render: function() { return ( <MyField icon="user_icon" placeholder="Nickname" /> ); }, check: function () { console.log ("aakmslkanslkc"); } }) var MyField = React.createClass({ render: function() { ... }, handleChange: function(event) { //call parent! } })
有没有办法做到这一点。我的逻辑在reactjs“ world”上好吗?谢谢你的时间。
为此,您将回调作为属性从父级传递给子级。
例如:
var Parent = React.createClass({ getInitialState: function() { return { value: 'foo' } }, changeHandler: function(value) { this.setState({ value: value }); }, render: function() { return ( <div> <Child value={this.state.value} onChange={this.changeHandler} /> <span>{this.state.value}</span> </div> ); } }); var Child = React.createClass({ propTypes: { value: React.PropTypes.string, onChange: React.PropTypes.func }, getDefaultProps: function() { return { value: '' }; }, changeHandler: function(e) { if (typeof this.props.onChange === 'function') { this.props.onChange(e.target.value); } }, render: function() { return ( <input type="text" value={this.props.value} onChange={this.changeHandler} /> ); } });
在上面的示例中,Parent调用Child具有value和属性的调用onChange。的Child回报结合一个onChange处理程序,以一个标准的<input />元件,并传递值到Parent如果它定义的回调函数。
Parent
Child
value
onChange
<input />
结果,调用Parent的changeHandler方法时,第一个参数是的<input />字段中的字符串值Child。结果是Parent可以使用该值更新的状态,从而导致在<span />您在Child的输入字段中键入新值时,父元素的内容也随之更新。
changeHandler
<span />