想要通过在按钮中使用 if/else 条件来调用函数 (React)

Question

我有一个按钮，如果特定情况为真，我想调用一个特定的函数，如果不是，我想调用其他函数。

但我想在一个 onClick 事件中处理上述情况。

我试过了

<button onClick= {addTodo , handleClickOpen}> Add Todo </button>

我认为首先它会检查 addTodo 函数，如果 addTodo 没有完成它的工作，那么 handleClickOpen 函数将被调用。

但是 Button 并不是这样执行的。

你能推荐一些其他的方式吗？

谢谢

Answer 1

如果满足以下条件，您可以进行简单的内联：

<button onClick= {e => myBooleanCondition ? addTodo(e) : handleClickOpen(e)}> Add Todo </button>

Answer 2

据我了解，您可以简单地在 onClick 上调用一个包含 if/else 语句的函数。

const onClick = () => {
 if () { //some condition
     addTodo();
 } else {
      handleClickOpen();
   }
}

<button onClick= {onClick}> Add Todo </button>

以上语法可能因您的代码而异 standards/structure。

Answer 3

我的方法是使用三元运算符

<button onClick= {event => condition ? addTodo(event) : handleClickOpen(event)}> Add Todo </button>

你也可以调用第二个函数来决定操作哪个函数

<button onClick= {event => handleClick(event)}> Add Todo </button>

现在在你的 js 文件中使用这个函数

 handleClick(event){
        if(event){
             addTodo();
        }else{
             handleClickOpen();
        }
}

想要通过在按钮中使用 if/else 条件来调用函数 (React)

Want to call function by using if/else condition in a button (React)

javascript

button

reactjs