Manipulation et récupération des données d’un formulaire en React

13 Juil Manipulation et récupération des données d’un formulaire en React

On suppose qu’on a un formulaire dans notre component

/* CLASS .. */
render () {
    return (
      <form>
      
        <label>Email</label>
        <input type="text" name="email" />
        
        <label>Password</label>
        <input type="password" name="password" />
        
      </form>
    );
  }

Logiquement si on veut récupérer les donnes des inputs on doit faire comme ça

constructor () {
    super();
    this.state = {
      email: '',
      password: ''
    };
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
  }
  
  handleEmailChange (evt) {
    this.setState({ email: evt.target.value });
  }
  
  handlePasswordChange (evt) {
    this.setState({ password: evt.target.value });
  }

render () {
    return (
      <form>
      
        <label>Email</label>
        <input type="text" name="email" onChange={this.handleEmailChange} />
        
        <label>Password</label>
        <input type="password" name="password" onChange={this.handlePasswordChange} />
        
      </form>
    );
  }

Mais, on suppose qu’on a plus de deux champs, si on va refaire la même chose on aura un long script..

Je vous montre une autre solution plus simple est plus légère a être utiliser.

/* DANS NOTRE CLASS */

constructor(props) {
    super(props);
    this.state = {name: '', message: '', email: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(key) {
    return function (e) {
        var state = {};
        state[key] = e.target.value;
        this.setState(state);
    }.bind(this);
}

handleSubmit(event) {
    var data = {
        name: this.state.name,
        email: this.state.email,
        message: this.state.message
    }
    /* BEGIN POST DATAS TO PHP */
        
    /* END POST DATAS TO PHP */
    event.preventDefault();
}

Et dans le Render on aura notre formulaire :

<form onSubmit={this.handleSubmit}>
    <label>
        Name: <br />
        <input type="text" autoComplete="" value={this.state.name} onChange={this.handleChange('name')} />
    </label>
    <br />
    <label>
        Email: <br />
        <input type="text" autoComplete="" value={this.state.email} onChange={this.handleChange('email')} />
    </label>
    <br />
    <label>
        Message:<br />
        <textarea rows="4" autoComplete="" cols="50" type="text" value={this.state.message} onChange={this.handleChange('message')} />
    </label>
    <br />
    <input type="submit" value="Submit" />
</form>