步骤:
3.新增列表添加功能:
【逻辑】:
- 首先,render(){}函数会返回return()一个模块[jsx块]。<div></div>里写页面内容,有简单的输入元素,按钮元素和列表元素。
- 然后, 创建一个构造函数,定义一个数据项state,在里面定义 保存列表数据的数组list; 以及获取键盘输入值inputvalue。
- 其次,给输入元素<input>定义一个方法,handleInputChange,并绑定引用组件对象的this,便于handleInputChange(){}函数里引用
的对象始终是TodoList组件对象。用this.setstate({})方法获取修改/更新的状态,这里是获取到用户键盘输入的值inputvalue: e.target.value。
4. 接着,值获取到了,应该实现点击按钮,把输入的值显示到列表中。在<button>标签里定义一个方法 handleBtnClick,同理绑定引用组件对象的this。在handleBtnClick(){}方法里用this.setstate({})方法获取并更新从inputvalue得到的数据,并将原来的列表数据队列保存,添加新的值。this.state.list.map((item) =>{ return <li>{item}</li>,放在列表语句里,用map来遍历list数组的值。
5.最后,在点击了按钮后,输入框的值清空。关键代码:value={this.state.inputvalue}。
import React from 'react'; class TodoList extends React.Component { //ES6语法,创建一个构造函数 constructor(props){ super(props); //创建一个数据项 this.state = { list:[], inputvalue:'' } } handleBtnClick(){ this.setState({ list:[ ...this.state.list,this.state.inputvalue], inputvalue:''//把inputvalue值清空 }) } handleInputChange(e){ this.setState({ inputvalue: e.target.value }) } /*原来onClick={this.handleBtnClick}中的this引用的是组件TodoList对象。 而handleBtnClick函数引用的this是指向button的。 通过绑定最外层的引用组件的this,将handleBtnClick方法也指向组件对象。 */ render() { return ( <div> <div> <input value={this.state.inputvalue} onChange={this.handleInputChange.bind(this)}/> <button onClick={this.handleBtnClick.bind(this)}>add</button> </div> <ul> { this.state.list.map((item) =>{ return <li>{item}</li> }) } </ul> </div> ); } } export default TodoList;