javascript - 点击事件的不同操作

Question

所以我有一个绑定(bind)到我的按钮的函数，它应该在每次单击时执行不同的操作；返回值将在另一个 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 问题。使用 vanilla JS，我可以通过将 clickThing 声明为零作为全局变量来使其工作，但我不知道如何使用 React 正确执行此操作。

为了使问题更精确: 如何在每次点击时执行不同的操作，用我想要的结果更新渲染？

任何反馈表示赞赏，即使我必须重新制作以上所有内容

Answer 1

问题出在 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 ) 会给你一个随机数，不超过水果数组的最高索引。