demo13

//demo13
               var Input = React.createClass({
                       getInitialState: function(){
                               return {loading: true, error: null, data: null,value: 'javascript'};
                       },
                       componentDidMount: function(){
                               var  val = this.state.value;
                               var url = 'https://api.github.com/search/repositories?q='+ val +'&sort=stars';
                               $.get(url, function(result){
                                       if(this.isMounted()){
                                               this.setState(
                                                       {loading: false, data: result, error: null, value: val}
                                               );
                                       }
                               }.bind(this));
                       },
                       handleClick: function(){
                               var  val = this.state.value;
                               var url = 'https://api.github.com/search/repositories?q='+ val +'&sort=stars';
                               try {
                                       $.get(url, function(result,status){
                                               this.setState(
                                                       {loading: false, data: result, error: null}
                                               );
                                       }.bind(this));
                               }catch(err){
                                       this.setState(
                                               {loading: false, data: null, error: err}
                                       );
                               }
                       },
                       handleChange: function(event){
                               var  val = event.target.value;
                               this.setState({value: val});
                       },
                       render: function(){
                               var val = this.state.value;
                               if(this.state.loading){
                                       return <span>Loading...</span>;
                               }else if(this.state.error !== null){
                                       return <span>Error: {this.state.error.message}</span>;
                               }else{
                                       var repos = this.state.data.items;
                                       var repoList = repos.map(function(repo, index){
                                               return (
                                                       <li key={index}>
                                                               <a href={repo.html_url}>{repo.name}</a>
                                                               ({repo.stargazers_count} stars)<br/>
                                                               {repo.description}
                                                       </li>
                                               );
                                       });
                                       return (
                                               <main>
                                                       <div>
                                                       this is React.createClass <hr/>
                                                       01\getInitialState 初始化状态 <hr/>
                                                       02\compcomponentDidMount 加载完成 <hr/>
                                                       03\handleClick 点击 <hr/>
                                                       04\handleChange 改变 <hr/>
                                                       05\render 渲染 <hr/>
                                                       <input type="text" value={val} onChange={this.handleChange} />
                                                       <p onClick={this.handleClick}>you selach {val} this. Click to toggle.</p>
                                                       </div>
                                                       <h1>Most popular {val} projects in github</h1>
                                                       <ol>{repoList}</ol>
                                               </main>
                                       );
                               }
                       }
               });
               ReactDOM.render(
                       <Input />,
                       document.getElementById('example')
               );
//效果  input 输入动态展示要搜索的值，然后点击文本，搜索结果在下面展示30条