Reactを使ってフォームの入力と表示をしてみよう

f:id:utr066:20180115180320p:plain

サクッとやりたいので、１ファイルでいきます。フォーム表示の前にまずはHelloWorldの表示をしてみましょう。

Hello Worldを表示させる

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Hello, World</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">


var Hello = React.createClass({
    render: function() {
        return (
            <h1>Hello, World!</h1>
        );
    },
});

React.render(<Hello />, document.getElementById('content'));
  </script>
</body>

スクリーンショット 2018-01-15 16.11.10.png

Hello worldはこれで表示できる。やってることはHelloというcomponentを作って、それをidがcontentの要素の中に表示させている。

フォームを作る

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Hello, World</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

var Form = React.createClass({
    render: function() {
        return (
          <form>
          <input type="text" ref='item'/>
          <input type='submit' value='message' />
          </form>
        );
    },
});

React.render(<Form />, document.getElementById('content'));
  </script>
</body>

これでformは表示される。

スクリーンショット 2018-01-15 16.08.58.png

今のままではただフォームの形を成しているだけなので、実際に動かしてみます。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Form</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

  var Form = React.createClass({
    handleSubmit: function(e) {
      e.preventDefault();
      console.log("こんにちは");
    },
    render: function() {
      return (
        <form onSubmit={this.handleSubmit}>
          <input type="text"/>
          <input type="submit" />
        </form>
      );
    }
  });
React.render(<Form />, document.getElementById('content'));
  </script>
</body>

onSubmitを使って送信時には、handleSubmitを動かすようにします。

スクリーンショット 2018-01-15 17.28.55.png

これは表示されますね。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Form</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

  var Form = React.createClass({
    getInitialState: function(){
      return{
        name: ''
      }
    },
    handleSubmit: function(e) {
      e.preventDefault();
      console.log(e.target.value);
    },
    render: function() {
      return (
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.name} type="text"/>
          <input type="submit" />
        </form>
      );
    }
  });
React.render(<Form />, document.getElementById('content'));
  </script>
</body>

では、これはどうでしょう。もはやフォームに入力することができません。defaultValueなんかを使えば、入力することはできるようになります。

入力した値を表示させる

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Form</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

  var Form = React.createClass({
    getInitialState: function(){
      return{
        name: ''
      }
    },
    handleClick: function(e){
      this.setState({name: e.target.value});
    },
    handleSubmit: function(e) {
      e.preventDefault();
      console.log(this.state.name);
    },
    render: function() {
      return (
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.name} type="text" onChange={this.handleClick}/>
          <input type="submit" />
        </form>
      );
    }
  });
React.render(<Form />, document.getElementById('content'));
  </script>
</body>

何か文字が変更されるとonChangeのhandleClickが動き、stateのnameが更新され、onSubmitするとその更新されたnameがコンソールに出力されます。

入力した内容を画面に表示させる

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Form</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

  var Form = React.createClass({
    getInitialState: function(){
      return{
        name: ''
      }
    },
    handleClick: function(e){
      this.setState({name: e.target.value});
    },
    handleSubmit: function(e) {
      e.preventDefault();
      console.log(this.state.name);
    },
    render: function() {
      return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input value={this.state.name} type="text" onChange={this.handleClick}/>
            <input type="submit" />
          </form>
          {this.state.name}
      </div>
      );
    }
  });
React.render(<Form />, document.getElementById('content'));
  </script>
</body>