时间戳

首页 > 解决方案 > 无法使用 react typed.js 回调说明

reactjs - 无法使用 react typed.js 回调说明

问题描述

每次类型字符串随此节点模块更改时，我都会尝试更新位于状态中的计数器。当我将preStringTyped函数附加到组件时，函数（alert位于 中preStringTyped）仅触发一次。

这是模块：https ://github.com/ssbeefeater/react-typed

这是我的代码 - 你可以忽略randomlySelectElementsanddisplayTweets函数，这里重要的preStringTyped是return().

  preStringTyped = () => {
    alert("typed")
  }


  randomlySelectElements = (number, array) => {
    let shuffedArray = _.shuffle(array);
    let selectedEle = shuffedArray.slice(0, number);
    return selectedEle;
  }


  displayTweets = () => {
    if(!this.state.rawData){
      return null
    }else{
      let getRandomTweetsStrings = () => {
          return this.randomlySelectElements(10, this.state.rawData)
          .map((ele, index) => {
            return ele.masterData.randomString
          })
      }

      return (
        <ReactTyped
          loop
          typeSpeed={50}
          backSpeed={20}
          strings={
              getRandomTweetsStrings()
          }
          smartBackspace
          backDelay={1}
          fadeOutDelay={100}
          loopCount={0}
          showCursor
          cursorChar="|"
          onBegin={this.preStringTyped()}
        />
      )
    }
  }

标签： reactjstyped.js

解决方案

首先，您需要使用将在键入每个字符串之前触发的preStringTyped回调（不是）。onBegin同样在您的代码中，您将执行该函数this.preStringTyped()，但您应该将其作为对回调属性 ( preStringTyped={this.preStringTyped}) 的引用传递。你的代码应该是这样的

        <ReactTyped
          loop
          typeSpeed={50}
          backSpeed={20}
          strings={
              getRandomTweetsStrings()
          }
          smartBackspace
          backDelay={1}
          fadeOutDelay={100}
          loopCount={0}
          showCursor
          cursorChar="|"
          preStringTyped={this.preStringTyped} // <- not onBegin={this.preStringTyped()}
        />

推荐阅读