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")
)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容