Los accesorios son una forma de pasar datos de sólo lectura entre los componentes, y las acciones son idénticas a la comunicación real entre los componentes.
Puedes pasar el manejador de eventos al componente como un accesorio, tal como pasarías los datos como la cadena, el número, la matriz, los objetos, JSON, y así sucesivamente.
Pero para pasar los datos de un componente infantil a uno de los padres usando un manejador de eventos, pasa los datos como un parámetro. Veamos un ejemplo para elaborar más sobre esto.
Ejemplo
Este ejemplo implementa una página sencilla con dos entradas de texto y un botón. Al hacer clic en el botón se activa una acción del componente hijo para acceder a la acción del padre (como un accesorio).
El primer paso es crear la acción en el componente padre de esta manera:
12345678910constructor(){super();this.state={};this.submitForm=this.submitForm.bind(this);}submitForm(values){this.setState({ values })}jsx
La acción es submitForm(). Usa la misma acción para pasar al componente infantil, así:
123<FormDemoonFormSubmit={this.submitForm}/&;jsx
Ahora crea el componente hijo con el formulario simple, y basado en el clic del botón, accede a la acción que viene del componente padre, que se llama onSubmitForm().
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849importReact,{Componente}de "reaccionar";classFormDemoextendsComponente{constructor(){super();this.state={};this. onInputChange=esto.onInputChange.bind(this);this.onSubmitForm=esto.onSubmitForm.bind(this);}onInputChange(event){this.setState({[event.target.name]: event.target.value});}onSubmitForm(){this.props.onFormSubmit(this. state)}render(){retorno(<div,³³³$0027table$0027$0027tr,³³$0027td$0027$0027³$0027First Name$0027$0027³$0027$0027³$0027$0027/td³$0027$0027³$0027$0027td³$0027$0027³$0027$0027inputtype=$0027text³$0027$0027name³$0027$0027fname³$0027$0027onChange={this. onInputChange}/{{[};};/td. onInputChange}/{{simplemento};};/td²;};/trabajo};tr²;td²;};buttononClick={this.onSubmitForm};jsx
Este ejemplo ha creado dos acciones diferentes. Una es onInputChange(), que se usa para actualizar el valor de estado una vez que el valor de entrada ha cambiado. La otra es onSubmitForm(), que envía el formulario cuando se hace clic en el botón.
El cuerpo del formulario contiene una tabla con las diferentes entradas y el botón para enviar el formulario, pero observe cómo acceder a la acción desde el componente padre y pasar los datos al componente hijo.
123onSubmitForm(){this.props.onFormSubmit(this.state)}jsx
El método anterior se dispara cuando se hace clic en el botón, y la función accede al método que viene del componente padre como props llamado onFormSubmit().
Así que tan pronto como un usuario haga clic en el botón de envío, los valores actualizados serán enviados al componente principal.
Ahora, accede a los datos que vienen del componente hijo al componente padre, así:
12345678910111213141516171819202122232425262728293031323334353637importReact,{Componente}de "reaccionar";importar{ renderizar }de "reaccionar-dom";importarFormDemofrom". /FormDemo";classAppextendsComponent{constructor(){super();this.state={};this.submitForm=this.submitForm.bind(this);}submitForm(values){this.setState({ values })}render(){const{ values }=this. state;return(<div>h2;};Pasar la función al componente hijo</h2;};hr/&;};FormDemoonFormSubmit={this.submitForm}/;hr/&;div;};Valores de la forma presentada: <br/;};Nombre: {valores && valores. fname}<br/{N-]}; Apellido: {valores && valores.lname}</div>|div;);}}render(<App/{N-]};,document.getElementById("root"));jsx
En este componente padre, obtenga los valores enviados por el componente hijo, así:
123submitForm(values){this.setState({ values })}jsx
Del parámetro de la función, obtener los valores de forma como fname y lname, que son enviados por el componente hijo como datos de devolución de llamada. Úsalo para renderizar, así:
123456789101112131415161718render(){const{ values }=este.state;return(<div><h2;passing function to the child component</h2;hr/&;w;FormDemoonFormSubmit={this. submitForm}/{ ~ - hr/hr/ ~ - div.; Valores del formulario enviado: ~ - br/ -; Nombre: {valores && values.fname}<br/ -; Apellido: {valores && values.lname}</div ~ - ~ - div.;);}jsx
La función render() accedió a los datos procedentes del componente infantil y los almacenó en el estado de componente local.
Después de almacenar los valores al estado, puedes acceder a él por su nombre, así:
12345<div.; Valores de la forma presentada : <br/> Nombre: {valores && values.fname}<br/> Apellido: {valores && values.lname}</div.
jsx
Tienes acceso a los valores de estado usando values.fname y values.lname, que provienen del componente hijo.
Esta no es la única manera de hacer esto. También puede acceder a la función directamente desde el evento de clic sin pasar la referencia a otra función del componente.
12345<tr;td;||botónonClick={()=.onFormSubmit(this.state)};Submit</botón
jsx
El ejemplo anterior muestra cómo acceder a la función desde los accesorios directamente utilizando el evento onClick. Esta es la otra forma de acceder a la función directamente desde el elemento.
Aparte de los ejemplos anteriores, también puede pasar el valor directamente junto con la función como un parámetro. Una vez que acceda a la función referenciada desde el padre, puede pasar el valor como un parámetro, así:
123456789101112<tr;|;td;;buttononClick={()=.props.onFormSubmit({nombredeusuario:$0027Test123$0027, contraseña:$0027123456$0027})};; Submit
jsx
En este ejemplo, junto con la función que viene del componente padre llamado onFormSubmit(), el argumento adicional se proporciona como un objeto que contiene el nombre de usuario y la contraseña.
Así es como se pasan los argumentos como objetos, matrices o JSON junto con una función a la función referenciada que viene del componente padre.