web-dev-qa-db-ja.com

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) });
  }
});
javascripthtmlreactjsreact-jsx
21
Lucas - Better Coding Academy

ドキュメント で説明されているように、制御入力を使用する必要があります。入力を行うには-controlled2つの小道具を指定する必要があります

  1. onChange-入力が変更されるたびにコンポーネントstateを入力valueに設定する関数
  2. 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}
      />
    );
  }

テキストエリアについてより具体的に- ここ

18
Dmitriy Nevzorov

入力を値に更新するだけです

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で同じ値を取得できます

3
Piyush.kapoor