javascript - logo - ReactJS llama al método padre

react js vs angular

Question

Estoy dando mi primer paso en ReactJS y tratando de entender la comunicación entre padres e hijos. Estoy haciendo forma, entonces tengo el componente para diseñar campos. Y también tengo el componente principal que incluye el campo y lo controlo. Ejemplo:

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

Hay alguna forma de hacerlo. ¿Y mi lógica es buena en reaccionar "mundo"? Gracias por tu tiempo.

Answer 1

Para hacer esto, pasa una devolución de llamada como propiedad hasta el hijo del padre.

Por ejemplo:

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

En el ejemplo anterior, Parent llama a Child con una propiedad de value y onChange . El Child a cambio, vincula un controlador onChange a un elemento <input /> estándar y pasa el valor hasta la devolución de llamada del Parent si está definido.

Como resultado, se llama al método changeHandler Parent con el primer argumento que es el valor de cadena del campo <input /> en el elemento Child . El resultado es que el estado de la Parent se puede actualizar con ese valor, haciendo que el elemento <span /> la matriz se actualice con el nuevo valor a medida que lo escribe en el campo de entrada del Child .

Answer 2

Puedes usar cualquier método padre. Para esto, debe enviar este método de su padre a su hijo como cualquier valor simple. Y puede usar muchos métodos del padre a la vez. Por ejemplo:

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

Y úsela así en el Niño (para cualquier acción o método infantil):

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