ReactJS调用父级方法

我正在做ReactJS的第一步，并试图了解父母与孩子之间的沟通。 我在做forms，所以我有组件的样式字段。 而且我也有包含字段和检查它的父组件。 例：

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! } }) 

有没有办法做到这一点。 而且我的逻辑在反应的“世界”中是好的吗？ 谢谢你的时间。

Answer 1

为此，您将callback作为属性传递给父级的孩子。

例如：

 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调用具有value和onChange属性的Child 。 Child返回将一个onChange处理程序绑定到一个标准的<input />元素，并将该值传递给Parent的callback函数（如果已定义）。

因此，调用Parent的changeHandler方法时，第一个参数是Child <input />字段的string值。 结果是，可以用该值更新Parent的状态，导致父项的<span />元素在您在Child的input字段中input时更新为新值。

Answer 2

您可以使用任何父级方法。 为此，您应该将这些方法从您父母那里发送给您的孩子，就像任何简单的价值一样。 你可以一次使用父母的许多方法。 例如：

 var Parent = React.createClass({ someMethod: function(value) { console.log("value from child", value) }, someMethod2: function(value) { console.log("second method used", value) }, render: function() { return (<Child someMethod={this.someMethod} someMethod2={this.someMethod2} />); } }); 

然后像这样使用它（对于任何动作或任何子方法）：

 var Child = React.createClass({ getInitialState: function() { return { value: 'bar' } }, render: function() { return (<input type="text" value={this.state.value} onClick={this.props.someMethod} onChange={this.props.someMethod2} />); } }); 

Answer 3

你也可以用自定义的JavaScript事件，jQuery的例子来做到这一点：

 var YourComponent = React.createClass({ componentDidMount: function(){ // Register event (the name is just an example of namespacing) $(document).on("ReactComponent:YourComponent:myCustomMethod", this.myCustomMethod); }, myCustomMethod: function(){ // code }, render: function(){ return ( // jsx ) } }); // Trigger event from everywhere $(document).trigger("ReactComponent:YourComponent:myCustomMethod"); 

请记住尽可能限制使用此解决scheme到“静态”React组件，以避免注册太多的事件，您可能会忘记取消注册。