Question

// hello，当我单击“喝”它时，控制台会出现一个世界你好世界，当我单击食物时，还会显示“你好，世界又聚在一起”了。

class Item extends React.Component {

  constructor()  {
    super();
    this.state = {
    Card1: 0
  } ;
  this.state = {
    Card2: 0
  };
}
  handleClick = (button) => {
   this.setState({ Card1: button })
  };
handel = (event) => {
  this.setState({ Card2: event })
}

  render() {
    return (
      <div>

 <button onClick={() => this.handleClick(1)}>drink</button>
 <button onClick={() => this.handel(1)}>food </button>
 <div>
{this.state.handel ? console.log("goodbye world") : console.log("null")}
{this.state.handleClick  ? console.log('hello world') : console.log("null")}
</div>

      </div>
    );
  }
}

export default Item;

Answer 1

您的代码中有很多问题。

在您的代码状态下初始化不正确是在外面   构造函数。您无需在两次声明状态初始化   一个组成部分。

事件处理程序不正确。

您正在将状态设置为card1和card2，但您正在检查处理程序   像this.state.handle这样的功能不正确。

使用布尔值进行播放，而不是使用0和1。

具有含义   状态和处理程序功能的全名（按按钮）

您应该执行以下操作。

class Item extends React.Component {

  constructor()  {
    super();
    this.state = {
       drink: false,
       food: false
    } ;
  }
  handleDrink = () => {
   this.setState({ drink: true, food: false })
  };
  handleFood = () => {
     this.setState({ food: true, drink: false })
  }

  render() {
    const { drink, food } = this.state;
    return (
      <div>
         <button onClick={() => this.handleDrink()}>drink</button>
         <button onClick={() => this.handleFood()}>food </button>
         <div>
            {drink && console.log("goodbye world")}
            {food  && console.log('hello world')}
         </div>
      </div>
    );
  }
}

export default Item;

Answer 2

欢迎堆栈溢出。只是一些基本错误。

构造函数中只能有1个状态变量。

this.state = {
Card1: 0,
Card2: 0,
};

在渲染中，您应该检查状态变量，然后打印到控制台。您是检查未定义内容的字符串。

{this.state.Card2 ? console.log("goodbye world") : console.log("null")}
{this.state.Card1 ? console.log('hello world') : console.log("null")}

让我知道这对您是否有意义。

用饮料按钮打个招呼世界，用食物按钮打招呼世界

2 个答案: