フォームとイベントに反応する


この章では、React でフォームを使用する方法について説明します。

簡単な例

この例では、入力ボックスの入力値value = {this.state.data}を設定します。入力ボックスの値が変更されたときに状態を更新できます。 onChange イベントを使用して、入力の変更を監視し、状態を変更できます。

インスタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    var HelloMessage = React.createClass({
      getInitialState: function() {
        return {value: 'Hello php!'};
      },
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function() {
        var value = this.state.value;
        return <div>
                <input type="text" value={value} onChange={this.handleChange} /> 
                <h4>{value}</h4>
               </div>;
      }
    });
    ReactDOM.render(
      <HelloMessage />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

上記のコードは、Hello php! という値を持つ入力要素をレンダリングし、ユーザーを更新します。 onChange イベントの応答 入力された値。

例 2

次の例では、子コンポーネントでフォームを使用する方法を示します。 onChange メソッドは状態の更新をトリガーし、更新された値をサブコンポーネントの入力ボックスの value に渡してインターフェイスを再レンダリングします。

親コンポーネントでイベント ハンドラー (handleChange) を作成し、それを prop (updateStateProp) として子コンポーネントに渡す必要があります。

インスタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    var Content = React.createClass({
      render: function() {
        return  <div>
                <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
                <h4>{this.props.myDataProp}</h4>
                </div>;
      }
    });
    var HelloMessage = React.createClass({
      getInitialState: function() {
        return {value: 'Hello php!'};
      },
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function() {
        var value = this.state.value;
        return <div>
                <Content myDataProp = {value} 
                  updateStateProp = {this.handleChange}></Content>
               </div>;
      }
    });
    ReactDOM.render(
      <HelloMessage />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

Reactイベント

次の例は、onClickイベントを通じてデータを変更する方法を示しています。スタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    var HelloMessage = React.createClass({
      getInitialState: function() {
        return {value: 'Hello php!'};
      },
      handleChange: function(event) {
        this.setState({value: 'php中文网'})
      },
      render: function() {
        var value = this.state.value;
        return <div>
                <button onClick={this.handleChange}>点我</button>
                <h4>{value}</h4>
               </div>;
      }
    });
    ReactDOM.render(
      <HelloMessage />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

子コンポーネントから親コンポーネントの

状態
を更新する必要がある場合は、イベントを作成する必要があります親コンポーネントのハンドラー (

handleChange)、そして prop (updateStateProp) として子コンポーネントに渡されます。インスタンスは次のとおりです: インスタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    var Content = React.createClass({
      render: function() {
        return  <div>
                  <button onClick = {this.props.updateStateProp}>点我</button>
                  <h4>{this.props.myDataProp}</h4>
               </div>
      }
    });
    var HelloMessage = React.createClass({
      getInitialState: function() {
        return {value: 'Hello php!'};
      },
      handleChange: function(event) {
        this.setState({value: 'php中文网'})
      },
      render: function() {
        var value = this.state.value;
        return <div>
                <Content myDataProp = {value} 
                  updateStateProp = {this.handleChange}></Content>
               </div>;
      }
    });
    ReactDOM.render(
      <HelloMessage />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

←
→