<script type="text/babel">
           let colorArr = ["red","yellow","blue","orange","pink","green","gray"];
             class HelloWorld extends React.Component{
              constructor(props){
                super(props);
                this.state={
                  bgColor:"yellow"
                };
                this.toggleColor=this.toggleColor.bind(this);
                 this.changeColor=this.changeColor.bind(this);
              }
              
              
              toggleColor(){
                if(this.state.bgColor=="yellow"){
                  this.setState({bgColor:"red"});
                }else{
                   this.setState({bgColor:"yellow"});
                }
              }
              
              componentDidMount(){
                  let colorPos = 0;
                  setInterval(()=>{
                      this.setState({bgColor:colorArr[colorPos]});
                      if(colorArr.length-1>colorPos){
                          colorPos++;
                      }else{
                          colorPos=0;
                      }
                      
                  },1000)
              }
              changeColor(event){
                  this.setState({bgColor:event.target.value})
              }
              render(){
                console.log(this.props.name);
                //jsx
                let objStyle = {background:this.state.bgColor,fontSize:26};
                return (<div id="jieshao" style={objStyle} onClick={this.toggleColor}>
                         <h3>我叫嘉伟</h3>
                         <input value={this.state.bgColor} onChange={this.changeColor}/>
                     </div>);
              }
            }
             let app = document.getElementById("app");
            ReactDOM.render(<HelloWorld
            name="fat" color="yellow"/>,app);