Question

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

open import Algebra
open import Algebra.Structures
open import Data.Vec
open import Relation.Binary.PropositionalEquality
open import Algebra.FunctionProperties
open import Data.Product

module _ {Carrier : Set} {_+_ _*_ : Op₂ Carrier} {0# 1# : Carrier} (ICSR : IsCommutativeSemiring _≡_ _+_ _*_ 0# 1#) where

csr : CommutativeSemiring _ _
csr = record{ isCommutativeSemiring = ICSR }

zipWith-replicate-0# : ∀ {n}(xs : Vec Carrier n) → zipWith _+_ (replicate 0#) xs ≡ xs
zipWith-replicate-0# [] = refl
zipWith-replicate-0# (x ∷ xs) = cong₂ _∷_ (proj₁ (IsMonoid.identity (IsCommutativeMonoid.isMonoid
                                                           (IsCommutativeSemiring.+-isCommutativeMonoid
                                                           (CommutativeSemiring.isCommutativeSemiring csr)))) x)
                                          (zipWith-replicate-0# xs)

然后在我的渲染函数中：

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()
  }
}

我和JS一起学习React，所以我不确定它是否主要是一个React问题。使用vanilla JS，我可以通过将render () { return <button onClick={this.clickSomething.bind(this)}>CLICK FRUIT</button> <p>this.fruitOfChoice</p> }声明为零作为全局变量来使其工作，但我不知道如何使用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)会给你一个随机数，不超过水果数组的最高指数。

Answer 2

任何HTML标记中的

始终将您的js代码包含在{}中。即

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

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

return this.clickSomething()

点击事件的不同操作

2 个答案: