ReactJS вызов родительского метода

Я делаю свой первый шаг в ReactJS и пытаюсь понять связь между родителями и детьми. Я делаю форму, поэтому у меня есть компонент для стилизации полей. А также у меня есть родительский компонент, который включает в себя поле и его проверку. Пример:

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 "мир"? Спасибо, что уделили мне время.

2 74
javascript reactjs

2 ответа:

для этого вы передаете обратный вызов как свойство вниз к ребенку от родителя.

например:

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 ' s changeHandler метод вызывается с первым параметром является строковое значение из

104

вы можете использовать любые родительские методы. Для этого вы должны отправить эти методы от вашего родителя к вашему ребенку, как любое простое значение. И вы можете использовать много методов от родителя в одно время. Например:

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} />);
    }
});
27