在 React.js 中使用 handleClick 更改布尔值 [重复]

Posted 2023-02-23

【中文标题】在 React.js 中使用 handleClick 更改布尔值 [重复]

【英文标题】：Change boolean value with handleClick in React.js [duplicate]

【发布时间】：2018-09-15 15:03:09

【问题描述】：

我正在开发一个小组件，它本质上是一个按钮，允许用户单击以查看小型购物车覆盖。

如果“showCart”为假（也就是未点击按钮），购物车应该是不可见的。如果单击按钮，“showCart”应该变为 true，从而呈现组件。

我尝试单击按钮，虽然我确实收到了我的 console.log 消息“按钮单击”，但我的购物车覆盖没有出现。谁能给我一些关于为什么这不起作用的见解？

class ViewCart extends React.Component 
  constructor(props) 
    super(props);
    this.state =  showCart: false 
    this.handleClick = this.handleClick.bind(this);
  

  handleClick() 
    this.setState = showCart: true 
    console.log("button clicked")

  
  render()  
    return (
      <div> 
      <button onClick=this.handleClick> Show Cart 
        this.state.showCart ? <Cart />: null 
        </button>

        </div>
        );
  

【参考方案1】：

你没有以正确的方式改变状态，改变状态的代码将是这样的this.setState( showCart: true) 从下面的代码中替换handleClick 函数。

 handleClick() 
    this.setState( showCart: true) 
    console.log("button clicked")
  

【参考方案2】：

您以错误的方式更新您的state :)

handleClick() 
  this.setState( showCart: true)
  console.log("button clicked")