Question

我正在研究一个小组件，它本质上是一个按钮，允许用户点击查看小型购物车覆盖图。

如果“showCart”为false（AKA未单击该按钮），则购物车应该不可见。如果单击该按钮，“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>
        );
  }
}

Answer 1

您没有以正确的方式更改状态，更改状态的代码将如下this.setState({ showCart: true}) 从下面的代码中替换handleClick函数。

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

Answer 2

您以错误的方式更新state：）

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

在React.js中使用handleClick更改布尔值

2 个答案: