ReactJS调用父方法

ReactJS调用父方法

为此，您将回调作为属性从父级传递给子级。

例如：

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

的

changeHandler

方法时，第一个参数是的

<input/>

字段中的字符串值

Child

。结果是

Parent

可以使用该值更新的状态，从而导致在

<span/>

您在

Child

的输入字段中键入新值时，父元素的内容也随之更新。