React简单学习

React的简单学习，参考了技术胖的相关学习

功能添加文本框中的某些内容

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

class Xioajiejie extends Component{
    constructor(props){
        super(props)
        this.state={
            inputValue:"要添加的内容",
            list:['111111','222222']
        }
    }
    render(){
        return (
           <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((item,index)=>{
                     return <li key={index+item}>{item}</li>
                     })
                 }
               </ul>
           </Fragment>
        )
    }
    inputChange(e){
        console.log(e.target.value)
        this.setState({
            inputValue: e.target.value
        })
    }
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue]
         
        })
    }
}
export default Xioajiejie

程序运行
$ npm start//运行

程序中的import React,{Component, Fragment} from 'react'，是ES6的语法-解构赋值等价于：

import React from 'react'
const Component = React.Component