Saltar al contenido

Pasando un parámetro adicional con un evento onChange

Solución:

Al escribir esto:

<fieldset onChange={this.props.handleChange("tags")}>

handleChange se llamará inmediatamente tan pronto como se active el render.

En cambio, hazlo así:

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>

Ahora el handleChange será llamado cuando onChange se llama handler.

En su evento de identificador, use la función de flecha doble, no es necesario enlazar cuando se usa la función de flecha:

handleChange = tags => (event) => {
    console.log(tags);
    console.log(event.target.value);
}

Y en el Niño:

<fieldset onChange={this.props.handleChange("tags")}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

Como OP, originalmente había publicado esto como un seguimiento de mi pregunta, pero se eliminó y me dijeron que lo publicara como una respuesta, así que aquí está:

Según la respuesta de Ritesh Bansal, he aprendido lo siguiente:

La siguiente línea no funcionaba porque cuando se usa paréntesis después del nombre de la función, la función se llama inmediatamente en lugar de esperar a que ocurra un cambio:

<fieldset onChange={this.props.handleChange("tags")}>

Lo anterior no funcionará, ni tampoco una función como esta:

<fieldset onChange={this.props.handleChange()}>

Lo anterior también se llamaría inmediatamente en el primer renderizado.

Hay dos soluciones para esto:

La forma no tan buena:

<fieldset onChange={this.props.handleChange.bind(this, "tags")}>

La forma mucho mejor:

<fieldset onChange={(evt) => this.props.handleChange("tags", evt)}>

El problema ahora está resuelto. ¡Gracias a todos!

Actualizar:

También investigué la sugerencia de Shubham Khatri de cambiar el elemento hijo a esto:

<Child handleChange={(e,val) => this.handleChange(e, val)}/>

No me di cuenta que usando bind en la función de render, que cada vez que se llama a render, crea una nueva instancia de función. Por lo tanto, puedo usar el método de Shubham Khatri o vincular los métodos en el constructor.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *