Comment attacher un gestionnaire d'événements à différentes entrées dans React JS?

Question

Je suis nouveau à réagir js.

J'ai plusieurs entrées dans ma forme et en considérant l'approche d'entrée contrôlable dans React, j'essaye de faire le travail avec un gestionnaire d'événement à toutes les autres entrées. J'ai pris quelques références dans le débordement de pile et j'y suis arrivé. Toujours pas en mesure de comprendre pourquoi je suis incapable d'écrire dans ma boîte de saisie.

Voici mon code.

import React, {Component} from 'react'; 
import { Grid, Row, Col , Button } from 'react-bootstrap'; 

class ContactForm extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     name: '' , 
     email: '' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
     this.setState({[e.target.name]: e.target.value}) 
    } 

    render() { 
    return (
     <form> 
      <input name="input1" value={this.state.name} onChange={this.handleChange}/> 
      <input name="input2" value={this.state.email} onChange={this.handleChange} /> 
      <p>{this.state.name}, {this.state.email}</p> 
     </form> 
    ); 
    } 
} 


export default ContactForm; 

Answer 1

Vous utilisez l'attribut name pour identifier l'entrée, mais vous lisez les mauvaises valeurs dans la fonction render, « name » et « e-mail » au lieu de « input1 » et « input2 »

Vous pouvez le faire à la place:

<input name="input1" value={this.state.input1} onChange={this.handleChange}/> 
<input name="input2" value={this.state.input2} onChange={this.handleChange} /> 

ou

<input name="name" value={this.state.name} onChange={this.handleChange}/> 
<input name="email" value={this.state.email} onChange={this.handleChange} /> 

Vous auriez aussi ch ange this:

this.state = { 
    name: '' , 
    email: '' 
}; 

dans le constructeur si vous utilisez la première option.

Answer 2

J'utiliserais ref pour y parvenir:

handleChange(e) { 
     const {input1, input2} = this.refs; 
     //do what ever you want with the values 

    } 

    render() { 
    return (
     <form> 
      <input name="input1" value={this.state.name} ref="input1" /> 
      <input name="input2" value={this.state.email} ref="input2" onChange={this.handleChange} /> 
      <p>{this.state.name}, {this.state.email}</p> 
     </form> 
    ); 
    } 
} 

Aussi, j'utiliser un bouton soumettre, ou quelque chose comme ça, au lieu d'un écouteur d'événement sur un ou deux des entrées