初始化页面
- 先画出来一个界面,在这里面进行操作
- 通过
数组
的形式展现数据 - 通过
this.state.list.map()
遍历数组 - 通过
this.setState({})
来改变数据的值 - 完整代码在最下面
<div id="app"></div>
<script type="text/babel">
class App extends React.Component {
constructor() {
super()
this.state = {
list: ["大家好,这里是第一个参数","第二个参数"]
}
}
render() {
return (
<div>
<input type="text"/>
{
this.state.list.map((item, index) => {
return (
<div key={
index} className="box">
<li>{
item}</li>
</div>
)
})
}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("app"))
</script>
- 实现增加
- 通过向数组中
添加数据
,来改变显示 - 通过判断键盘事件是否为
回车键
进行增加
<input type="text" onKeyUp={
this.add} />
add = (e) => {
if (e.keyCode === 13) {
this.setState({
list: [e.target.value, ...this.state.list]
})
e.target.value = ""
}
结果展示: