热门搜索 :
考研考公
您的当前位置:首页正文

react - 留言板demo

来源:东饰资讯网
引入react,

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

import ReactDom from 'react-dom'

class App extends
//存数据的列表
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")
)

Top