javascript - 为什么 React 表单的 onSubmit 在每次击键后都会触发，如何使用回车按钮提交表单？

Question

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

提交功能:

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，这也不起作用。

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

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>