为什么每次击键后反应表单的 onSubmit 都会触发，如何使用输入按钮提交表单？

Question

目标是通过按回车按钮提交表单。 所以我在我的反应表单中添加了onSubmit属性。 表单在每次按键后提交。 没问题，我可能只是忘记绑定提交方法对吗？ 错了，它是一个无状态的功能组件。

提交功能：

const postLogin = (e) => {
    e.preventDefault()
    
    axios.post("http://<...>/users/login", {
      username,
      password
    }).then(result => {
      if (result.status === 200) {
        console.log(result.data)
        
        setAuthTokens(result.data.token);
        setRole(result.data.role);
      } else {
        setIsError(true);
      }
    }).catch(e => {
      setIsError(true);
    });
  }

形式：

<Form onSubmit={postLogin}>
  <Input 
    type="username" 
    value={username}
    placeholder="username"
    onChange={e => setUserName(e.target.value)}
  />
  <Input 
    type="password" 
    value={password}
    placeholder="password"
    onChange={e => setPassword(e.target.value)}
  />
  <Button onClick={() => postLogin}>Sign In</Button>
  <Button onClick={postRegister({username, password})}>Register</Button>
</Form>

所有组件都是样式组件并匹配它们的元素（表单、按钮、输入）我还尝试在密码输入上设置onKeyPress侦听器并给出一个条件，如e => e.keyCode === 13 ? postLogin() : null e => e.keyCode === 13 ? postLogin() : null ，这也不起作用。

我如何防止此提交功能触发每次击键，并使用回车按钮提交表单？

Answer 1

当调用setPassword或setUserName然后你的组件重新渲染时，这会导致第二个按钮导致注册问题

删除第二个按钮“注册”中的 onClick 处理程序，因为您每次渲染组件时都会调用它。

所以

1. 删除表单中的 onSubmit
2. 修复 postLogin（添加() ）
3. 修复 postRegister（不要直接调用，而是将其添加为回调）

<Form>
  <Input 
    type="username" 
    value={username}
    placeholder="username"
    onChange={e => setUserName(e.target.value)}
  />
  <Input 
    type="password" 
    value={password}
    placeholder="password"
    onChange={e => setPassword(e.target.value)}
  />
  <Button onClick={() => postLogin()}>Sign In</Button>
  <Button onClick={() => postRegister({username, password})}>Register</Button>
</Form>

Answer 2

只需添加按钮类型

<Button type="submit">Sign In</Button>

或者从表单标签中删除 onSubmit 并更改

<Button onClick={() => postLogin()}>Sign In</Button>