单击事件的不同操作

Different action for a click event

本文关键字：操作 事件 单击      更新时间：2023-09-26

所以我有一个函数绑定到我的按钮，应该在每次点击执行不同的动作;返回值将在另一个getter中使用，我将在render中调用它，因此我无法在这种情况下使用setState。

class awesomeFruits extends React.Component {
  ... constructor stuff etc
  clickSomething () {
    let fruit = 'banana'
    let clickThing = 1
    clickThing++
    // please notice that I only need 3 actions
    if (clickThing === 1) {
      fruit = 'apple'
    } else if (clickThing === 2) {
      fruit = 'grape'
    } else {
      fruit = 'pineapple'
      clickThing = 1 // reset click
    }
    return fruit
  }
  get fruitOfChoice () {
    ... non related stuff
    this.clickSomething()
  }
}

然后在渲染函数中:

render () {
  return <button onClick={this.clickSomething.bind(this)}>CLICK FRUIT</button>
    <p>this.fruitOfChoice</p>
}

我正在学习React和JS一起，所以我不确定它是否主要是一个React问题。与香草JS我能够通过声明clickThing为零作为一个全局变量使其工作，但我不知道如何用React正确地做到这一点。

让问题更精确:我怎样才能在每次点击上有不同的动作，用我想要的结果更新渲染?

感谢任何反馈，即使我必须重新制作以上所有

问题在clickSomething的声明中。每次执行时，它都会将clickThing重置为1。正如您在问题中指出的那样，您需要将clickThing的初始声明移到函数执行之外。我是这样做的:

        class awesomeFruits {
            constructor() {
                this.fruits = ['banana', 'grape', 'pineapple'];
                this.clickThing = -1;  // Starting this out at -1 so the first execution increments it to 0, and it hits the first index of your fruits array;
            }
            clickSomething () {
                if(this.clickThing === (this.fruits.length - 1)) {
                   this.clickThing = 0;
                } else {
                   this.clickThing++;
                }
                return this.fruits[this.clickThing];
            }
        }
        const fruitPicker = new awesomeFruits;
        document.getElementById('testMe').addEventListener('click',() => {
            console.log(fruitPicker.clickSomething());
        })
<button id="testMe">Pick a fruit</button>

将水果名称放入数组中更简洁，并且允许您稍后用最少的代码添加更多。

最后，它可能不是你想要的，但是如果你想输出一个随机的水果，this.clickThing = Math.round(Math.random() * fruits.length-1)会给你一个随机数，不超过水果数组的最高索引。

在任何HTML标签中都要将js代码包含在{}中。即

<p> {this.fruitOfChoice } </p>

在getFruitOfChoice中，您需要返回一个值，因为这是您最终调用的函数。

return this.clickSomething()
相关文章：