javascript - react-hook-form 的问题 - api 获取空值

Question

我正在和朋友一起申请。我正在使用反应挂钩形式。api 只获取空值。这是我们应用程序中非常关键的元素。请帮忙，这是我的代码：

  const NewItemBar = ({ isVisible, handleClose }) => {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = ({ name, data, description }) => {
    api
      .post(endpoints.createTask, {
        name,
        data,
        description,
      })
      .then((response) => {
        console.log(response);
      })
      .catch((err) => console.log(err));
  };
  return (
    <StyledWrapper handleClose={handleClose} isVisible={isVisible}>
      <StyledHeading big>Dodaj zadanie do wykonania</StyledHeading>
      <StyledForm onSubmit={handleSubmit(onSubmit)}>
        <StyledInput
          placeholder="nazwa zadania"
          type="text"
          name="name"
          {...register('name', { required: 'Required' })}
        />
        <StyledInput
          placeholder="data wykonania"
          type="text"
          name="data"
          {...register('data', { required: 'Required' })}
        />
        <StyledTextArea
          type="text"
          placeholder="opis"
          name="description"
          as="textarea"
          {...register('description', { required: 'Required' })}
        />
        <StyledButton type="submit">Zapisz</StyledButton>
      </StyledForm>
    </StyledWrapper>
  );
};

标签： javascriptreactjsreact-hook-form

Answer 1

如果是自定义组件，您应该Controller使用forwardRef.

https://react-hook-form.com/get-started#IntegratingwithUIlibraries

当您希望组件自己管理内部状态时，forwardRef 可能很有用。例如：

const PhoneInput = forwardRef(
    (
        {
            id,
            name,
            label,
            placeholder,
            errorMsg,
            onSubmit,
            onChange,
            onBlur,
            disabled,
        },
        ref
    ) => {
        const [value, setValue] = useState("");

        const _onChange = (value) => {
            setValue(value);
            onChange(value);
        };

        const classes = (className) =>
            [
                className,
                disabled ? "disabled" : "",
                errorMsg ? "is-invalid" : "",
            ].join(" ");

        console.log(value);

        return (
            <div className={classes("f-form-group phone-input")}>
                <div className="phone-input-wrap">
                    <div className="inputs">
                        <label htmlFor={name}>{label}</label>
                        <NumberFormat
                            className={classes("f-form-control")}
                            name={name}
                            id={id}
                            type="tel"
                            format="+7 (###) ### ##-##"
                            mask="_"
                            placeholder={placeholder}
                            value={value}
                            onChange={(e) => _onChange(e.target.value)}
                            onBlur={onBlur}
                            getInputRef={ref}
                        />
                    </div>
                    <button
                        type="button"
                        className="btn btn-primary"
                        onClick={() => onSubmit(value)}
                    >
                        Подтвердить
                    </button>
                </div>
                <div className="invalid-feedback">{errorMsg}</div>
            </div>
        );
    }
);