Reactjs 在onClick中指定阿波罗突变与三元突变？

我不熟悉打字脚本和迁移react前端来学习。我目前在登录/注册组件方面遇到了问题-一个三元运算符被分配给onClick处理程序，该处理程序指示是否执行登录或注册。我实现了一个变通方法，在这里我将突变封装在函数中，但它看起来很脏

下面是一个简单的示例，它返回一个类型分配错误，因为三元组中的值与onClick处理程序不共享属性。如有必要，我可以提供一个更健壮、可复制的示例

const Auth = () => {
const history = useHistory();
const [formState, setFormState] = useState({
    login: true,
    firstName: '',
    lastName: '',
    username: '',
    password: '',
    email: ''
});

const [loginMutation] = useMutation(LOGIN_MUTATION, {
    onCompleted: (response) => {
        //...
    }
});
const [signupMutation] = useMutation(SIGNUP_MUTATION, {
    variables: {
        //...
    },
    onCompleted: (response) => {
        // ...
    }
});

return (
    <>
        {!formState.login && (
            display extra inputs for registration form
        )}
        username and password fields

        <button onClick={formState.login ? login : signup}>
            {formstate.login ? login: signup}
        </button>
    </>
)

const Auth=（）=>{
const history=useHistory（）；
常量[formState，setFormState]=useState({
登录：对，
名字：''，
姓氏：“”，
用户名：“”，
密码：“”，
电子邮件：“”
});
常量[loginMutation]=使用变异（登录变异{
未完成：（响应）=>{
//...
}
});
const[signupMutation]=使用突变（signupu突变{
变量：{
//...
},
未完成：（响应）=>{
// ...
}
});
返回(
{！formState.login&&(
显示注册表的额外输入
)}
用户名和密码字段
{formstate.login？登录：注册}
)

---

}

正如您正确猜测的那样，

onClick

具有签名

（e:MouseEvent）=>void

，而突变具有不同的签名（类似于

（选项？：MutationFunctionOptions）=>Promise

）。所以，当你说，

onClick={login}

你实际上是这样做的：

onClick={e=>login（e）}

这是错误的

解决这个问题的一种方法是编写一个内联函数

formState.login？登录（）：注册（）}>
{formstate.login？登录：注册}

Ah非常感谢您的解答和解释。这正是我想要的。出于好奇，假设我还没有意识到onClick需要一个函数，那么根据它的签名，我怎么知道它需要一个函数呢？我只是不明白我如何根据类型有机地解决这个问题。我意识到这可能是一个超级基本的问题，我可能会熟悉时间学习类型script

onClick

是一个事件，您需要提供一个事件处理程序，与大多数事件一样，它通常是一个以事件为参数的函数。即使在香草HTML。此函数用于决定如何处理事件对象。提交表单、显示模式或更改主题。。。我个人依靠VSCode自动建议查看签名，但您也可以参考文档：，