代码之家 › 专栏 › 技术社区 › mikasa

在react中,如何用自己的参数调用多个函数?

react-props onclick reactjs javascript

mikasa · 技术社区 · 7 年前

我想在单击时通过props调用两个函数pass。注意,他们都需要自己的论据。在对堆栈溢出进行了一些搜索之后,我找到了这个解决方案:

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

因此,我的实现如下:

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

但是第二个函数永远不会被调用。有人能解释一下为什么这个不起作用吗?我假设这是有约束力的问题?

F1在父组件中:

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

f2也在parent参数中,如下所示:

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

他们正在被传递给子组件

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

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

4 回复 | 直到 6 年前

Azamat Zorkanov 7 年前

第二个函数不工作,因为您实际上没有使用绑定 ,您只是为将来的函数调用绑定作用域。如果要调用具有指定范围的函数,请使用呼叫或应用

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

编辑

对于您的案例,您可以这样调用第二个函数:

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

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

Krina Soni 7 年前

试试这个方法

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

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

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

f1(values){
this.f2(values);
}

Mayank Shukla 7 年前

因为您不调用第二个方法,而是使用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?

Harikrishnan 7 年前

两种方法都可以调用为

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前