javascript - ReactJS 调用父方法

Question

我正在迈出 ReactJS 的第一步，并试图理解 parent 和 child 之间的交流。 我正在制作表格，所以我有样式字段的组件。而且我还有包含字段并检查它的父组件。示例:

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“世界”中是否合适？感谢您的宝贵时间。

Answer 1

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

例如:

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作为返回绑定(bind) onChange标准处理程序 <input />元素并将值传递到 Parent的回调，如果它被定义。

因此 Parent的 changeHandler方法被调用，第一个参数是来自 <input /> 的字符串值Child 中的字段.结果是 Parent的状态可以用那个值更新，导致父级的 <span />在 Child 中键入新值时更新元素的输入字段。