React.jsでformのinputを使う #JavaScript

前回のつづき

今回はGithubのapiを使用（https://api.github.com/users/ユーザー名）

フォームにユーザー名を入れるとユーザー情報が出る

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="root"></div>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="script.js"></script>
  </body>

</html>

script.jsx

var Card = React.createClass({
  getInitialState: function(){
    return {};
  },
  componentDidMount: function(){
    var component = this;
    $.get("https://api.github.com/users/" + this.props.login, function(data){
      component.setState(data);
    });
  },
  render: function(){
    return(
      <div>
        <img src={this.state.avatar_url} width="80" />
        <h3>{this.state.login}</h3>
        <hr/>
      </div>
    );
  }
});

var Form = React.createClass({
  handleSubmit: function(e){
    e.preventDefault();
    var loginInput = React.findDOMNode(this.refs.login);
    this.props.addCard(loginInput.value);
    loginInput.value = '';
  },
  render: function(){
    return (
      <form onSubmit={this.handleSubmit}>
        <input placeholder="github login" ref="login" />
        <button>Add</button>
      </form>
    );
  }
});

var Main = React.createClass({
  getInitialState: function(){
    return {logins: []};
  },
  addCard: function(loginToAdd){
    this.setState({logins: this.state.logins.concat(loginToAdd)});
  },
  render: function(){
    var cards = this.state.logins.map(function(login){
      return (<Card login={login} />);
    });
    return (
      <div>
        <Form addCard={this.addCard} />
        {cards}
      </div>
    );
  }
});

React.render(<Main />, document.getElementById("root"));