时间戳

首页 > 解决方案 > 如何从事件期间调用的函数中获取返回值？

reactjs - 如何从事件期间调用的函数中获取返回值？

问题描述

我有一个函数让我们说 test() 绑定到 onMouseEnter 事件。test() 返回一个值，它是指针的当前位置。我想在我的代码的另一部分使用它，所以我想将返回值存储在一个变量中，我该怎么做。

<exampleComponent
   onMouseEnter = {(e) => test(e)}
/>

.
.
.

test(e) {
    .
   return <obj>
}

标签： reactjs

解决方案

正如评论中提到的，最好将其存储在状态中并将其传递给另一个组件。


class otherComponent extends Component {
  state = { val: '' }
  handleMouse = position => this.setState({val: position})

  render(){
   return (
    <div>
      < ExampleComponent mouseFunc={this.handleMouse} />
    </div>

   )
  }

const ExampleComponent = props => {

 return (
  <div onMouseEnter={(e) => props.mouseFunc(e.target.valueOfPosition)}/>
 )
}

}

这是一种相当基本的方式，在不知道您的组件树是什么样子的情况下，我敢肯定这不是一个准确的表示。但这个想法是

  1. 您可以使用一个变量来设置状态，该变量将保持您在组件中的位置（例如此处的父级）。

  2. 然后为您的事件创建一个自定义处理程序.. 并将该函数传递给您的子组件（在此函数中您设置您需要它的状态）。

  3. 并监听相关组件中的事件（在这种情况下是孩子）

如果这往往会变得混乱，并且您正在向上和向下传递 props 组件并且忘记了它们，那么此时最好考虑使用状态管理库，例如 Redux

推荐阅读