使用 useForm onChange 不触发响应输入

Question

我有一个 Input 和 useForm 寄存器，其中 onChange 不起作用。

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { Form, FormGroup, Input } from "reactstrap";

const App = () => {
  const [loginData, setLoginData] = useState({
    email: null,
    password: null
  });
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const submitForm = (data) => {
    console.log(data);
  };

  return (
    <div className="row">
      <div className="col-sm-12">
        <Form onSubmit={handleSubmit(submitForm)}>
          <FormGroup className="has-wrapper">
            <Input
              type="email"
              name="email"
              id="email"
              className="has-input input-lg"
              placeholder="Enter Email Address"
              value={loginData.email}
              onChange={(e) => console.log(e)}
              {...register("email", { required: true })}
              aria-invalid={errors.email ? "true" : "false"}
            />
            <span className="has-icon">
              <i className="ti-email"></i>
            </span>
            {errors.email && (
              <span style={{ color: "red" }} role="alert">
                required
              </span>
            )}
          </FormGroup>
        </Form>
      </div>
    </div>
  );
};

export default App;

当我更改电子邮件的值时，不会调用 onChange。 https://codesandbox.io/s/gracious-chatterjee-3e8i0

Answer 1

您需要使用 <Controller /> 组件，因为 register 不适用于您的 <Input /> 组件等外部受控组件。查看文档中的此 section 以了解更多信息。

您也可以在此处省略 useState，让 RHF 为您处理状态更改。

const App = () => {
  const {
    control,
    handleSubmit,
    formState: { errors }
  } = useForm({
    defaultValues: { email: "", password: "" }
  });

  const submitForm = (data) => {
    console.log(data);
  };

  return (
    <div className="row">
      <div className="col-sm-12">
        <Form onSubmit={handleSubmit(submitForm)}>
          <FormGroup className="has-wrapper">
            <Controller
              name="email"
              control={control}
              defaultValue=""
              rules={{ required: true }}
              render={({ field: { ref, onChange, ...field } }) => (
                <Input
                  {...field}
                  type="email"
                  id="email"
                  innerRef={ref}
                  onChange={({ target: { value } }) => onChange(value)}
                  className="has-input input-lg"
                  placeholder="Enter Email Address"
                  aria-invalid={!!errors.email}
                />
              )}
            />
            <span className="has-icon">
              <i className="ti-email"></i>
            </span>
            {errors.email && (
              <span style={{ color: "red" }} role="alert">
                required
              </span>
            )}
          </FormGroup>
          <input type="submit" />
        </Form>
      </div>
    </div>
  );
};