当我更新状态时我的输入没有更新值

Question

我做了两个组件，一个是登录组件，一个是表单输入。

我将 props 传递给表单输入以呈现某些输入表单。

我还有一个状态来保存此输入的值（双向绑定）。

到目前为止渲染效果还不错。

当我提交表单并将状态设置为初始时出现问题，我在控制台日志中看到状态更改，但我的输入没有显示，它们仍然显示了我提交的最后一个值。

感谢您的帮助

这是我的 SignIn 组件：

const SignIn: React.FC = () => {
    const [info, setInfo] = useState({
        email: "",
        password: "",
    })

    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault()

        setInfo({
            email: "",
            password: "",
        })
    }
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const { value, name } = event.target
        setInfo({ ...info, [name]: value })
    }
    return (
        <div className="sign-in">
            <h2>I already have an account</h2>
            <span>Sign in with your email and password</span>

            <form onSubmit={handleSubmit}>
                <FormInput
                    label="Email"
                    name="email"
                    type="email"
                    value={info.email}
                    handleChange={handleChange}
                    required
                />
                <FormInput
                    label="Password"
                    name="password"
                    type="password"
                    value={info.password}
                    handleChange={handleChange}
                    required
                />
            </form>
        </div>
    )
}

这是我的 FormInput 组件：

const FormInput: React.FC<Props> = ({ handleChange, label, value, ...otherProps }) => {
    return (
        <div className="group">
            <input className="form-input" onChange={handleChange} {...otherProps} />
            {label ? (
                <label className={`${value.length ? "shrink" : ""} form-input-label`}>
                    {label}
                </label>
            ) : null}
        </div>
    )
}

Answer 1

您错过了将 value 传递给 FormInput 组件中的输入，这就是它没有被清除的原因。

const FormInput = ({ handleChange, label, value, ...otherProps }) => {
  return (
    <div className="group">
      <input className="form-input" value={value} onChange={handleChange} {...otherProps} />
      {label ? (
        <label className={`${value.length ? "shrink" : ""} form-input-label`}>
          {label}
        </label>
      ) : null}
    </div>
  );
};