时间戳

首页 > 解决方案 > 如何在连接到 redux 存储的组件上使用 ref 回调函数？

reactjs - 如何在连接到 redux 存储的组件上使用 ref 回调函数？

问题描述

我正在尝试在我创建的几个 ref 上使用回调函数，然后将操作分派到 redux 存储。我遇到的问题是，当我尝试使用回调时，我收到一条错误消息，指出我试图在回调中调用的函数不是函数。我认为这是因为当我将子组件传递给 connect()() 时，它会失去它的原始绑定。我的问题有解决方案吗？

//callback

sumbitQuiz = () => {

      this.state.words.forEach((word) => {
          return this[word].current.compairWordAndHeldWord()
        })

    }

//Function in child ref I'm trying to call

compairWordAndHeldWord = () => {
        if( this.state.word === this.state.inputWord) {
            this.setState(() => ({ 
                wordAndInputWordMatch: true
             }))
             this.props.dispatch(addCorrectAnswer())
        } else {
            this.setState(() => ({ 
                wordAndInputWordMatch: false
             }))
        }
      }

标签： reactjsreduxreact-redux

解决方案

我认为这样做的一种方法是我修改你addCorrectAnswer的以便从中返回一个承诺，然后（ehehe）你可以通过以下方式处理流程：

      compairWordAndHeldWord = () => {
        if( this.state.word === this.state.inputWord) {
            this.setState(() => ({ 
                wordAndInputWordMatch: true
             }))
             this.props.dispatch(addCorrectAnswer())
             .then(()=>{
              //put here your callback logic
              }
             .catch(()=>{})
        } else {
            this.setState(() => ({ 
                wordAndInputWordMatch: false
             }))
        }
      }

推荐阅读