javascript - 在 React 中，如何使用自己的参数调用多个函数？

Question

我想在点击时通过 Prop 调用两个函数。请注意，它们都需要自己的参数。在 Stack Overflow 上搜索了一下后，我找到了这个解决方案:

onclick={()=>{ f1(); f2() }}

所以我的实现如下:

onClick={() => {f1(arg); f2.bind(this, arg)}}

但是第二个函数永远不会被调用。谁能解释为什么这不起作用？我假设它有一些约束力问题？

f1 在父组件中:

f1(arg, event)
{
        event.preventDefault();
        // so on...
}

f2也在父参数中，如下:

f2(arg)
{
     // do something with the argument 
}

它们被传递给子组件

 render()
    {
            const { f2, arg, f1 } = this.props;
    
            return(
                <button onClick={() => {f2(arg); f1.call(this, arg)}}>
)
    }

Answer 1

第二个函数不起作用，因为您实际上并没有使用 bind 调用函数，您只是为将来的函数调用绑定(bind)范围。如果要调用指定范围的函数，请使用 call 或 apply

关于他们的更多信息: https://stackoverflow.com/a/15455043/5709697

编辑

对于您的情况，您可以像这样调用第二个函数:

onClick={(e) => {f1(e); f2.call(this, e)}}

沙盒链接: https://codesandbox.io/s/509o1lxjp