Lo que estoy tratando de hacer:
Estoy tratando de pasar una cadena de un componente secundario a la función handleChange de un componente principal.
Lo que funciona actualmente:
Tengo una clase principal de React JS con el siguiente método:
handleChange(event) { console.log(event.target.value); }En la función de render tengo lo siguiente:
<Child handleChange={this.handleChange.bind(this)} />En la clase Child tengo:
<fieldset onChange={this.props.handleChange}> <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>Esto funciona bien.
Lo que estoy tratando de hacer en su lugar:
Estoy intentando agregar un parámetro de section a la función handleChange de la siguiente manera:
handleChange(section, event) { console.log(section); console.log(event.target.value); }Y en la clase Child tengo:
<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>Ahora me sale el error:
Uncaught TypeError: Cannot read property 'target' of undefinedEste error aparece en mi segunda instrucción console.log.
¿Qué estoy haciendo mal?
Además, estoy considerando hacer que el parámetro de section sea opcional. Si es así, ¿hay una manera fácil de hacer esto? Parece que podría no ser posible si el parámetro del evento debe ser el último.
Cuando estas escribiendo esto:
<fieldset onChange={this.props.handleChange("tags")}> handleChange se llamará inmediatamente tan pronto como se active el procesamiento.
En su lugar, hazlo así:
<fieldset onChange={(e) => this.props.handleChange("tags", e)}> Ahora se llamará al handleChange cuando se llame al controlador onChange .
En su evento de control, use la función de flecha doble, no es necesario enlazar cuando use 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>const handleChange = (tags) => (event) => { // console.log(tags); // console.log(event.target.value); }; <input type="text" name="name" placeholder="Name" value={input.Iname} onChange={handleChange("Iname")} />