web-dev-qa-db-fra.com

Comment obtenir la valeur de textbox dans React?

Je viens de commencer à utiliser React.js, et je ne sais pas s'il existe un moyen spécial d'obtenir la valeur d'une zone de texte, renvoyé dans un composant comme celui-ci:

var LoginUsername = React.createClass({
  render: function () {
    return (
      <input type="text" autofocus="autofocus" onChange={this.handleChange} />
    )
  },
  handleChange: function (evt) {
    this.setState({ value: evt.target.value.substr(0, 100) });
  }
});
javascripthtmlreactjsreact-jsx
21
Lucas - Better Coding Academy

Comme décrit dans documentation Vous devez utiliser une entrée contrôlée . Pour faire une entrée - contrôlée , vous devez spécifier deux accessoires dessus.

  1. onChange - fonction permettant de définir le composant state sur une entrée value à chaque fois que l'entrée est modifiée
  2. value - valeur d'entrée à partir du composant state (this.state.value par exemple)

Exemple:

  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }

Plus spécifiquement à propos de textarea - here

18
Dmitriy Nevzorov

il suffit de mettre à jour votre entrée à la valeur

var LoginUsername = React.createClass({
  getInitialState:function(){
     return {
        textVal:''
     }
 },
  render: function () {
    return (
      <input type="text" value={this.state.textVal} autofocus="autofocus" onChange={this.handleChange} />
    )
  },
  handleChange: function (evt) {
    this.setState({ textVal: evt.target.value.substr(0, 100) });
  }
});

Votre valeur de saisie de texte est toujours dans l'état et vous pouvez obtenir la même chose avec this.state.textVal

3
Piyush.kapoor