如何在onChange而不是使用React-Hook-Form库提交时提交React表单字段

如何解决如何在onChange而不是使用React-Hook-Form库提交时提交React表单字段

我已经开始使用新的React-Hook-form库，想要在Change而不是Submit上提交我的输入字段。另外，我打算使用Lodash的反跳功能以避免重新渲染

这是我到目前为止尝试过的：

import React,{ useEffect } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./styles.css";

export default function App() {
  const { register,handleSubmit,setValue } = useForm();
 

  useEffect(() => {
    register({ name: "firstName" },{ required: true });
  },[register]);

  return (
    <form>
      <input
        name="firstName"
        onChange={(e) => {
          setValue("firstName",e.target.value);
          handleSubmit((data) => console.log("data",data));
        }}
      />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

解决方法

如果您在handleSubmit内记录onChange的实现，则会发现它返回一个函数

尝试调用返回的函数，它应该提交。

onChange={(e) => {
    setValue("firstName",e.target.value);
    handleSubmit((data) => console.log("data",data))();
}}

我最近还为输入字段编写了“用户完成输入，然后提交”的版本-签出：https://stackoverflow.com/a/63419790/8680805

,

您为什么要在onChange上提交它？

但是如果您真的想这样做，这应该可行：

import React,{ useEffect } from "react";
import ReactDOM from "react-dom";
import { useForm,useWatch } from "react-hook-form";

import "./styles.css";

export default function App() {
  const { register,control,handleSubmit } = useForm()
  const firstName = useWatch({ control,name: 'firstName' })

  useEffect(() => {
    if(firstName && firstName.length > 0) {
      handleSubmit(data => console.log("data",data))()
    }
  },[firstName,handleSubmit])

  return (
    <form>
      <input ref={register({ required: true })} name="firstName" />
    </form>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

,

从您的示例来看，您似乎只想在输入更改后检索（所有）值。不确定这是否对您有帮助，但您可以使用 getValues 钩子中的 useForm 函数。

const Filters: FC<TProps> = ({ filters,setActiveFilter }) => {
  const { register,getValues } = useForm();

  const handleChange = () => {
    const values = getValues();
    // Do something with values,in my case I have used the 'setActiveFilter' function above.
  };

  return (
    <form>
      {filters.map((filter) => (
        <fieldset key={filter.id}>
          <legend>{filter.label}</legend>
          {filter.options.map((option) => (
            <label htmlFor={option.value} key={option.id}>
              <input
                type="checkbox"
                id={option.value}
                name={filter.label}
                value={option.id}
                ref={register}
                onChange={handleChange}
              />
              {option.value}
            </label>
          ))}
        </fieldset>
      ))}
    </form>
  );
};