React 免费教程 （二）列表菜单演示

知识点：

Fragment     

 import React,{Component,Fragment} from 'react'

constructor  说明数据

    constructor(props){
        super(props)
        this.state={
            inputValue:"",
            list:[] 
        }
    }

input 事件

           <Fragment>
                <div><input value={this.state.inputValue} onChange={this.inputChange.bind(this)} /> 
                <button onClick={this.addList.bind(this)}> 增加 </button></div>
                <ul>
                    {this.state.list.map((val,i)=>{
                        return <li key={i}>{val}</li>
                    })}
                </ul> 
           </Fragment>

this.setState 更新数据

    inputChange(e){ 
        this.setState({
            inputValue:e.target.value
        })
    }

    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:""
        })
    }

。。。 增加list