Question

我想在点击时通过道具调用两个函数。请注意，他们两个都需要自己的论点。在对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 arguement 
}

它们正在传递给子组件

 render()
    {
            const { f2, arg, f1 } = this.props;

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

Answer 1

第二个功能不起作用，因为您实际上并未使用 bind 来调用功能，因此您仅绑定了以后的功能调用范围。如果要在指定范围内调用函数，请使用呼叫或应用

有关它们的更多信息： https://stackoverflow.com/a/15455043/5709697

编辑

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

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

链接到沙箱： https://codesandbox.io/s/509o1lxjp

Answer 2

尝试这种方式

stickerView.setBackgroundColor(getResources().getColor(R.color.transparent));
stickerView.setBackgroundResource(R.color.transparent);
imageView.setBackgroundResource(R.color.transparent);

或如下进行单独的函数调用。

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

Answer 3

您可以将两种方法称为

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

Answer 4

因为您没有调用第二种方法，而是使用bind创建它。

将() => {}与onClik结合使用时，上下文将由arrow function进行维护，此后无需绑定这两个函数。

这样写：

onClick={(e) => {
   this.f1(e, arg1, arg2, arg3);     // use f1, if function is defined outside of class
   this.f2(e, arg2)
}}

f1 (e, arg1, arg2, arg3) {
   e.preventDefault();
   console.log(arg1, arg2, arg3)
}

f2 (e, arg2) {
   e.preventDefault();
   console.log(arg2)
}

检查MDN Doc：The bind() method creates a new function.

检查以下答案以获取有关绑定的更多详细信息：

Use of the JavaScript 'bind' method

Why is JavaScript bind() necessary?

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

4 个答案: