Question

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

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

.
.
.

test(e) {
    .
   return <obj>
}

Answer 1

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


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

}

这是一种基本的方法，并且不知道您的组件树是什么样子，我确定这不是一个准确的表示。但想法是

您将使用一个变量来设置状态，该变量将保持您在组件中的位置（例如此处的父级）。
然后您为事件..创建一个自定义处理程序，并将该函数传递给子组件（在此函数中，您可以设置所需位置的状态）。
并在相关组件（本例中为孩子）中监听事件

如果这会变得一团糟，并且您正在上下传递道具并失去对它们的跟踪，那么此时最好考虑使用状态管理库（例如Redux）

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

1 个答案: