為什么每次擊鍵后反應表單的 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>