React应用输入时自动提交表单，如何修改为仅点击提交按钮触发？

问题根源 #

你当前代码的核心问题有两个：

1. Button上的onSubmit={console.log(state.email)}是直接执行代码，不是绑定事件处理函数——组件每次渲染（包括输入框输入内容触发重渲染）都会执行这个console.log，所以会出现持续打印的情况。
2. 表单的onSubmit事件应该绑定在<Form>组件上，而不是<Button>上，type="submit"的按钮会自动触发表单的提交事件。

修改后的完整代码 #

const InputsSignUp = () => {
  const [state, setState] = React.useState({
    email: ""
  })

  function handleChange(evt) {
    // 用函数式更新合并state，避免覆盖其他属性
    setState(prevState => ({ ...prevState, email: evt.target.value }));
  }

  // 专门处理提交逻辑的函数
  function handleSubmit(evt) {
    evt.preventDefault(); // 阻止表单默认的页面刷新行为
    console.log(state.email); // 只有点击提交按钮时才会执行这里的代码
    // 在这里添加你的提交请求逻辑，比如调用后端接口
  }

  return (
    <>
      <Container fluid="sm" style={{backgroundColor: 'white'}}>
        <h1>{state.email}</h1>
        <Form onSubmit={handleSubmit}> {/* 把提交事件绑定在Form上 */}
          <Form.Group className="mb-3" controlId="formBasicUsername">
            <Form.Label>Email address</Form.Label>
            <Form.Control 
              type="email" // 改成email类型更符合语义
              placeholder="Enter email" 
              value={state.email} 
              onChange={handleChange} 
            />
            <Form.Text className="text-muted">
              We'll never share your email with anyone else.
            </Form.Text>
          </Form.Group>
          <Button variant="primary" type="submit">
            Submit
          </Button>
        </Form>
      </Container>
    </>
  )
}

export default InputsSignUp;

关键修改点说明 #

• 删掉了多余的独立email、password变量，直接使用state中的值
• 修正handleChange：去掉不必要的evt.preventDefault()（输入事件不需要阻止默认行为），同时用函数式更新合并state，并且把更新字段从错误的firstName改成email
• 新增handleSubmit函数：专门处理提交逻辑，通过evt.preventDefault()阻止表单默认的页面刷新，只有点击提交按钮时才会执行这里的代码
• 把onSubmit事件从<Button>移到<Form>上，type="submit"的按钮会自动触发表单的提交事件
• 输入框类型改成email，更符合邮箱输入的语义化要求

内容的提问来源于stack exchange，提问作者Rangel Koli