1 /**
2 - 今天我们通过es6语法，以及react新特性来优化我们的todo-list
3 - 顺带解决上个版本的key报错问题
4 */
1 /**
2 - 当我们需要一个对象某个属性的时候，我们可以使用解构赋值，这样在后续的代码就不需要通过原对象不停调用属性去获取了
3 - const { index } = this.props -----> 这就是解构赋值，在后续同一作用域使用this.props.index的时候直接使用index就可以了。
4 - item.js代码修改如下,app.js的代码就不在此展示了,各位自行修改。
5 */
6
7 import React, {Component, Fragment} from 'react';
8
9 class Item extends Component {
10 deletItem = () => {
11 const { deletItem, index } = this.props; // 解构赋值
12 deletItem(index);
13 }
14 render(){
15 const { value } = this.props; //解构赋值
16 return(
17 <Fragment>
18 <div
19 onClick = {this.deletItem}
20 >
21 {value}
22 </div>
23 </Fragment>
24 )
25 }
26 }
27
28 export default Item
1 /**
2 - 旧版本的react提供的setState()方法，只能接收一个对象。
3 - 新版本的react中，setState()还可以接收一个函数，并且该函数有一个默认参数prevState
4 - prevState表示未修改之前的state，也就是说我们在使用的时候无需再用this.state去获取属性了
5 - 另外在原先的代码中我们的render函数写得过于长，现将用一个函数将使用map函数的逻辑部分抽出来
6 - 解决key值报错问题，在引入item组件后使用的时候，给每一个item绑定一个key，目前我们现使用index，
7 - 后续我们讲解虚拟dom的时候再讲解为何开发中我们不要使用index去给key赋值。
8 - 现在使用这个特性去优化我们的app.js,代码如下。
9 */
10 import React, { Component, Fragment }from 'react';
11 import Item from './item.js'
12
13 class App extends Component {
14 constructor(props){
15 super(props);
16 this.state = {
17 inputValue: '',// 用来存储 input框中的 value值。
18 list:[] // 用来存储 每一个li的 value值。
19 }
20 }
21 handleInputChange = (e) => {
22 const value = e.target.value;
23 this.setState(() => ({inputValue: value}))//新版的react中的setState()函数可以接收一个函数，箭头函数的函数体使用（）包裹可以省略return
24 }
25 addList = () => {
26 this.setState((prevState) => { // 同时setState函数还提供一个prevState参数，这个参数代表未改变之前的this.state
27 const list = [...prevState.list, prevState.inputValue];
28 return {
29 list,
30 inputValue: '' // 添加完毕以后清空input框
31 }
32 })
33 }
34 deletListItem = (index) => { // 因为在绑定该方法的时候使用了bind函数，所以这里可以不实用箭头函数去保证this的指向
35 this.setState((prevState) => {
36 let list = [...prevState.list];
37 list.splice(index, 1);
38 return {list};
39 })
40 }
41 // 在原先的代码中我们的render函数写得过于长，现将使用map函数的逻辑部分抽出来
42 getItem = () => {
43 return (
44 this.state.list.map((item, index) => {
45 return(
46 <Item
47 key = {index} // 解决key值问题。
48 value = {item}
49 index = {index}
50 deletItem = {this.deletListItem}
51 ></Item>
52 )
53 })
54 )
55 }
56 render(){
57 return (
58 <Fragment>
59 <div>
60 <input
61 onChange = { this.handleInputChange }
62 value = {this.state.inputValue}
63 />
64 <button onClick = { this.addList }>提交</button>
65 </div>
66 <ul>
67 {this.getItem()} {/** 在次调用抽出来的逻辑函数，调用一下即可。*/}
68 </ul>
69 </Fragment>
70 );
71 }
72 }
73 export default App;