TodoList功能:通过input获取数据点击按钮添加到列表中,点击某一个列表行删除当前行数据;
1.创建项目:react官网--> Docs --> Create a New React App
配置好环境后打开终端输入命令创建react项目;
2.打开项目,删除不必要代码,App组件修改为TodoList
(1)分为3部分:input+button+List
利用map()方法渲染List;
button绑定onClick()事件添加数据;
input绑定onChange()事件获取到数据;
li绑定onClick()事件实现点击当前行时删除数据;
import React, { Component } from 'react';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
inputValue: '',
}
//改变元素this指向TodoList组件
this.handleBtnClick = this.handleBtnClick.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.handleItemDelete = this.handleItemDelete.bind(this);
}
handleInputChange(e) {
//获取input value值 e.target.value
this.setState({
inputValue: e.target.value
})
}
handleBtnClick() {
// [...this.state.list, this.state.inputValue] es6语法相当于获取数组内容pushs数据this.state.inputValue
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: '',
})
}
handleItemDelete(index) {
const list = [...this.state.list];
list.splice(index, 1);
//es6中 键值名一致省略写法
this.setState({ list });
}
render() {
return (
<div>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange} />
<button onClick={this.handleBtnClick}>add</button>
</div>
<div>
<ul>
{
//每行数据需要一个key值
this.state.list.map((item, index) => {
return <li key={index} onClick={this.handleItemDelete} >{item}</li>
})
}
</ul>
</div>
</div>
);
}
}
export default TodoList;
(2)拆分组件,将table单独拆分为一个组件TodoListItem;
父组件向子组件传递数据通过属性的方法,子组件通过this.props.属性名 的方法获取数据;
子组件通过父组件传递过来的方法将数据传递给父组件,父组件也可以用this.props调用这个方法;
首现修改TotoList代码:
创建TodoListItem组件:
另外,可以修改Todo Li st中最外层包裹的div为Fragment,这样在渲染dom树时不会渲染一层div;
import React, { Component, Fragment } from 'react';