点击事件的不同操作答案

【问题标题】：Different action for a click event点击事件的不同操作
【发布时间】：2016-09-05 22:09:55
【问题描述】：

所以我有一个绑定到我的按钮的函数，它应该在每次点击时执行不同的操作；返回值将在另一个 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>
}

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

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

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

【问题讨论】：

标签： javascript reactjs onclick click

【解决方案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());
        })

&lt;button id="testMe"&gt;Pick a fruit&lt;/button&gt;

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

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

【讨论】：

【解决方案2】：

在任何 HTML 标记中始终将您的 js 代码包含在 {} 中。即

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

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

return this.clickSomething()

【讨论】：

感谢您抽出宝贵的时间来写这个答案，但封闭几乎不是我做的一个错误。另外，请注意 clickSomething 是一个吸气剂，因此不应该以这种方式调用，但再次：谢谢 :)