React表单提交后邮箱输入框无法清空问题排查与解决

• 核心错误是两个输入框绑定了同一个useRef实例：React中同一个ref绑定到多个DOM节点时，ref最终只会指向最后完成挂载的节点，也就是你的密码输入框。所以执行ref.current.value = ""时只能操作到密码框，根本访问不到邮箱输入框的DOM节点。
• 你当前实现的是受控表单组件，输入框显示内容本应该完全由form state驱动，但你既没有给输入框绑定value属性关联state，又尝试用直接操作DOM、调用原生e.target.reset()这类非受控表单的写法清空内容：这类操作只会临时修改DOM显示值，不会同步更新React state，下一次组件重渲染时，state中存储的旧值会被重新写回输入框，看起来就是"清空失效"。
• 之前尝试setField("")不生效是传参错误：setField定义需要传入字段名、字段值两个参数，只传一个空字符串时匹配不到email/password字段，根本不会触发对应状态的更新。

完全不需要用ref操作DOM，按受控组件的标准逻辑改就行，改完两个输入框都能正常清空：

1. 给两个Form.Control补上value属性，和form state做双向绑定，保证state和输入框显示完全同步
2. 提交成功后直接重置form和errors状态即可，React会自动把输入框内容清空
3. 删掉那个共用的多余ref，同时建议把提交事件绑定到Form组件的onSubmit上，兼容回车触发表单提交的场景

修正后的完整代码如下：

import React from 'react';
import Form from 'react-bootstrap/Form';
import { Button } from 'react-bootstrap';
import { Container } from 'react-bootstrap';
import { useState } from 'react';

const allThis = () => {
  const [form, setForm] = useState({})
  const [errors, setErrors] = useState({})

  const setField = (field, value) => {
    setForm({
      ...form,
      [field]: value
    })
    if (!!errors[field]) setErrors({
      ...errors,
      [field]: null
    })
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = findFormErrors()
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors)
    } else {
      alert('Thank you for your feedback!');
      // 重置状态即可同步清空所有输入框
      setForm({});
      setErrors({});
    }
  }

  const findFormErrors = () => {
    const { email, password } = form
    const newErrors = {};
    if (!email || email.trim() === '') newErrors.email = 'cannot be blank!';
    if (!password || password.trim() === '') newErrors.password = "cannot be blank";
    return newErrors
  }

  return (
    <Container>
      <Form className="reduceForm" onSubmit={handleSubmit}>
        <Form.Label className="contact">Contact Me</Form.Label>
        <Form.Group className="mb-3" controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control 
            type="email" 
            placeholder="Enter email"  
            value={form.email || ''}
            onChange={e => setField('email', e.target.value)}
            isInvalid={!!errors.email} 
          />
          <Form.Control.Feedback type='invalid'>
            {errors.email}
          </Form.Control.Feedback>
        </Form.Group>

        <Form.Group className="mb-3" controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control 
            type="password" 
            placeholder="Password"
            value={form.password || ''}
            onChange={e => setField('password', e.target.value)}
            isInvalid={!!errors.password} 
          />
          <Form.Control.Feedback type='invalid'>
            {errors.password}
          </Form.Control.Feedback>
        </Form.Group>
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </Container>
  )
}

export default allThis

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