react - 留言板demo

引入react,

方法一：
import React from 'react'
方法二：
import React,{component} from 'react'

import ReactDom from 'react-dom'

class App extends React.Component{
//存数据的列表
state={list:[]};
//调整this指向
constructor(){
this.update=this.update.bind(this)
};
render(){
return(
//布局渲染
<div>
<input type="text" ref="name" />

<input type="text" ref="content"/>

<input type="button" value="留言" onClick={this.update}/>
{this.state.list.map((item,index)=>{
return <li key={item.id}>{item.name}/{item.content}</li>
})}
</div>
)
};
update(){
this.setState({
list:this.state.list.concat({
id:this.state.list.length+1,
name:this.refs.name.value,
content:this.refs.content.value
})
})
}
}

ReactDom.render(
<App/>,
document.querySelect("#root")
)