react中使用 setState 修改数据

import React, { Component } from 'react'

export default class Like extends Component {
  constructor() { 
    super();
    this.state = {
      isLike: false,
      isLike2: false,
    }
  }
  // 点击事件
  handleLikeBtn = () => {
    //  react 里修改数据用setState 方法,该方法可以有两个参数,第一个参数有两种情况:
    // 当第一个参数是对象时:
    this.setState({
      isLike: !this.state.isLike
    })
    // 当第一个参数是方法时,
    this.setState((preState, props) => {
      // 可以在第一个方法中获取之前的数据和props数据
      return {
        isLike2: !preState.isLike2
      }
    }, () => {
      // setState是异步的,可以在第二个方法中得到最新的数据
      console.log(this.state.isLike2 );
    })
  }
  render() {
    return (
      <div>
        <span style={{ fontSize: '36px', cursor: 'pointer' }}
          onClick={this.handleLikeBtn} >
           { this.state.isLike ? '取消 ❤️' : '喜欢 ?' }
           { this.state.isLike2 ? '取消 ?' : '喜欢 ?' }
        </span>
        
      </div>
    )
  }
}
 <Like name="茄子"></Like>

效果:

 


版权声明:本文为yinge0508原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。