想要通过在按钮中使用 if/else 条件来调用函数（React）答案

【问题标题】：Want to call function by using if/else condition in a button (React)想要通过在按钮中使用 if/else 条件来调用函数（React）
【发布时间】：2021-07-22 12:10:07
【问题描述】：

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

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

我试过了

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

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

但是 Button 的表现不是这样的。

您能建议其他方法吗？

谢谢

【问题讨论】：

如果 addTodo 返回 false，您的意思是要执行 handleClickOpen 吗？
我已经在下面给出了答案，如果你想在addTodo失败或其他情况下调用handleClickOpen，你可以简单地从addTodo返回一些值来检查是否调用@987654325 @ 与否。

标签： javascript reactjs button

【解决方案1】：

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

<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();
        }
}

【讨论】：

不要忘记将onClick 事件代理到回调。
作为它的reactjs帖子，所以可以在构造函数中使用bind关键字完成函数绑定？？是否需要在onClick方法中绑定，每个实例都会生成一个新函数？
在功能组件中没有那么多，因为this 是未定义的，所以没有什么可以绑定回调函数。如果出现性能问题，可以使用 useCallback 挂钩来记忆回调。
是的，我没有使用回调的原因是我认为它是一个类组件而不是功能组件，所以我现在根据功能组件编辑了我的语法

【解决方案2】：

你可以做一个简单的内联如果：

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

【讨论】：

【解决方案3】：

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

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

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

上述语法可能因您的代码标准/结构而异。

【讨论】：

不要忘记将onClick 事件代理到回调。