8.setState()

教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git

点赞功能

1.创建文件夹及文件src/components/Like/index.js

❤️图标参考地址

import React, {Component} from 'react';

class Like extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLiked: false,//是否喜欢，默认不喜欢
        };
    }

    render() {
        return (
            <div>
                <span>
                {
                    this.state.isLiked ? '取消 ❤️' : '喜欢 🖤'
                }
                </span>
            </div>
        );
    }
}

export default Like;

2.导出组件 src/components/index.js

export {default as TodoHeader} from './TodoHeader'
export {default as TodoInput} from './TodoInput'
export {default as TodoList} from './TodoList'
export {default as Like} from './Like'  #insert 新增

3.导入组件 src/App.js

import {
    TodoHeader,
    TodoInput,
    TodoList,
    Like,  #insert 新增
} from './components'

4.渲染到页面 src/App.js

render() {
        return (
            <Fragment>
                <TodoHeader desc={this.state.desc}>{this.state.title}</TodoHeader>
                <TodoInput btnText='ADD'/>
                <TodoList todos={this.state.todos}/>
                <Like/>  #insert 新增
            </Fragment>
        );
    }

5.给❤️或🖤加点击事件 src/components/Like/index.js

render() {
        return (
            <div>
                <span onClick={this.handlLikedClick}>    #update 修改
                {
                    this.state.isLiked ? '取消 ❤️' : '喜欢 🖤'
                }
                </span>
            </div>
        );
    }

事件函数与render(){}同级

5.1.修改state第一种方式

handlLikedClick=()=>{
   /**
    * 使用这种方式修改数据在react哩是不允许的，数据可以进行修改，但是界面不会被重新渲染
    * this.state.isLiked=!this.state.isLiked
    */
  //最好是用this.setState方式进行修改
  this.setState({
    isLiked:!this.state.isLiked
  })
}

5.2.修改state第二种方式

handlLikedClick=()=>{
        /**
         * @param prevState 上一次修改的state 为了防止异步操作获取的数据有问题
         * @param props 
         */
        this.setState((prevState,props)=>{
            return {
                isLiked:!prevState.isLiked
            }
        },()=>{
          //由于setState是异步的，如果想要获取最新的state,应该在这个回调函数里进行获取
          console.log(this.state.isLiked);
        })
    }

setState是异步操作