Как получить значение текстового поля в React?

Я только начал использовать React.js, и я просто не уверен, есть ли специальный способ получить значение текстового поля, возвращенного в таком компоненте:

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) });
  }
});

Ответы

Ответ 1

Как описано в документации Вам нужно использовать управляемый вход. Чтобы сделать ввод - контролируется, вам нужно указать два реквизита на нем

  • onChange - функция, которая будет устанавливать компонент state на вход value при каждом изменении ввода
  • value - входное значение из компонента state (this.state.value в примере)

Пример:

  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}
      />
    );
  }

Подробнее о textarea - здесь

Ответ 2

просто обновите свой ввод до значения

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) });
  }
});

Ваше текстовое входное значение всегда находится в состоянии, и вы можете получить то же самое this.state.textVal