Javascript 如何在onChange上提交react表单字段，而不是使用react钩子表单库在submit上提交

我已经开始使用新的React Hook表单库，希望在更改时提交输入字段，而不是在提交时提交。此外，我还计划使用Lodash中的debounce来避免重新渲染

这就是我迄今为止所尝试的：

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);

---

为什么要在更改后提交

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

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);

---

为什么要在更改后提交

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

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);

---

如果将handleSubmit的实现记录在onChange中，您会注意到它返回一个函数

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

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

---

我最近还编写了一个版本的user is done with type，then submit implementation for input fields-查看它：

如果您将handleSubmit的实现记录在onChange中，您会注意到它返回了一个函数

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

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

---

我最近还编写了一个版本的user is done with typing，然后提交输入字段的实现-请查看：

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

常量过滤器：FC={Filters，setActiveFilter}=>{ 常量{register，getValues}=useForm； 常量handleChange==>{ 常量值=获取值； //对值执行一些操作，在我的例子中，我使用了上面的“setActiveFilter”函数。 }; 回来 {filters.mapfilter=> {filter.label} {filter.options.mapoption=> {option.value} } } ; };

---

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

常量过滤器：FC={Filters，setActiveFilter}=>{ 常量{register，getValues}=useForm； 常量handleChange==>{ 常量值=获取值； //对值执行一些操作，在我的例子中，我使用了上面的“setActiveFilter”函数。 }; 回来 {filters.mapfilter=> {filter.label} {filter.options.mapoption=> {option.value} } } ; };

---

按照这种逻辑，用户一输入一个字符，你的表单就会提交。这就是你想要的吗？是的，为什么你首先要提交表单？让我们知道您的思考过程。如果用例不使用onChange，则使用onChange会导致不必要的渲染调用。我建议使用onSubmit。在这里，我只关心用户完成键入时的最终状态。所以，我计划使用debounce来避免重新渲染。按照这种逻辑，用户键入一个字符后，您的表单就会提交。这就是您想要的吗？是的，为什么您首先要提交表单onChange？让我们知道您的思考过程。如果用例不使用onChange，则使用onChange会导致不必要的渲染调用。我建议使用onSubmit。在这里，我只关心用户完成键入时的最终状态。因此，我计划使用debounce来避免重新渲染。仅供参考，此解决方案将导致无限重渲染循环。仅供参考，此解决方案将导致无限重渲染循环。