如何在 React 中的单个按钮单击事件上应用三元运算符

Question

你好开发社区我遇到了一个问题，需要你的帮助。

我正在尝试将单个按钮组件用于多种用途，这里出现了问题。

在深入探讨这个问题之前，我想简化我的要求如下：

所以我想根据 Boolean 变量isTrue执行多个操作，如果这个变量为真我想打印 true 否则打印 false

这是我尝试使用按钮组件的文件的代码：

        
<Button            
  handleClick={`${props.openForAddUser?handleAddUser():handleUpdate()}`}           
  buttonText={`${props.openForAddUser?"Add New User":"Update"}`}
/>


function handleAddUser(){
    alert("handle add new user");
}
function handleUpdate() {
   alert("handle update");
}

如果您想了解 Button 组件，这里是该组件的代码。

const Button = (props) => {
  return (
    <>
      <span className="flex flex-col items-center justify-center">
        <button
          
          type="submit"
          className={props.className}
          onClick={props.handleClick} // here the conditional callback function took place
        >
          {props.buttonText}
        </button>
      </span>
    </>
  );
};

export default Button;

我得到的错误就是这样

Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type.
    at getListener (react-dom.development.js:4054:1)
    at accumulateSinglePhaseListeners (react-dom.development.js:9317:1)
    at extractEvents$4 (react-dom.development.js:8976:1)
    at extractEvents$5 (react-dom.development.js:9004:1)
    at dispatchEventsForPlugins (react-dom.development.js:9096:1)
    at react-dom.development.js:9288:1
    at batchedUpdates$1 (react-dom.development.js:26140:1)
    at batchedUpdates (react-dom.development.js:3991:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)

注意：我正在寻找的唯一解决方案是为单个 onClick 事件添加多个 function。

@RajBhensdadiya 给出的解决方案

问题是我正在使用反引号将我的函数转换为简单的字符串

这是解决方案

<Button            
  handleClick={props.openForAddUser?handleAddUser:handleUpdate}           
  buttonText={`${props.openForAddUser?"Add New User":"Update"}`}
/>

Answer 1

尝试这个

<Button            
  handleClick={props.openForAddUser ? handleAddUser : handleUpdate}           
  buttonText={props.openForAddUser ? "Add New User" : "Update"}
/>

function handleAddUser(){
    alert("handle add new user");
}
function handleUpdate() {
   alert("handle update");
}