reactjs 在使用react-hook-form和计数器时没有得到正确的值

brtdzjyr 于 2023-03-29 发布在 React

关注(0)|答案(2)|浏览(293)

我有一个非常简单的计数器实现。在表单提交时，计数器的值总是“0”。计数器的值在变化，但我不知道为什么在表单提交时，计数器的值是0。
我不知道我错过了什么。谢谢你的时间。
CodeSandBox
下面是我的代码：

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const [quantity, setQuantity] = React.useState(0);

  const decrement = () => {
    setQuantity((prev) => (prev === 0 ? 0 : prev - 1));
  };

  const increment = () => {
    setQuantity((prev) => prev + 1);
  };

  const formSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>Counter</h1>
      <form onSubmit={handleSubmit(formSubmit)}>
        <button type="button" onClick={decrement}>
          -
        </button>
        <input type="number" value={quantity} {...register("quantity")} />
        <button type="button" onClick={increment}>
          +
        </button>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

reactjs

来源：https://stackoverflow.com/questions/75863613/not-getting-the-correct-value-on-using-react-hook-form-with-a-counter

2条答案

按热度按时间

mqkwyuun1#

由于useForm使用寄存器（onChange,name,onBlur）作为输入，并且您正在使用useSate的数量而不是useForm defaultValues，因此代码无法工作
如果你想使用useForm，那么你可以这样使用setValue,getValues和defaultValues

import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
  const { register, handleSubmit, setValue, getValues } = useForm({
    defaultValues: {
      quantity: 0
    }
  });

  const decrement = () => {
    setValue(
      "quantity",
      getValues("quantity") === 0 ? 0 : getValues("quantity") - 1
    );
  };

  const increment = () => {
    setValue("quantity", getValues("quantity") + 1);
  };

  const formSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>Counter</h1>
      <form onSubmit={handleSubmit(formSubmit)}>
        <button type="button" onClick={decrement}>
          -
        </button>
        <input
          type="number"
          value={getValues("quantity")}
          {...register("quantity")}
        />
        <button type="button" onClick={increment}>
          +
        </button>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

希望这对你有帮助

赞(0）回复(0）举报 2023-03-29

h7wcgrx32#

这个也许能帮到你

export default function App() {

  const handleChange = (event) => {
    setQuantity(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Result
    alert(quantity);
  };

  return (
    ....
      <form onSubmit={handleSubmit}>
        ....
        <input type="number" value={quantity} onChange={handleChange} />
        ....
      </form>
    ....
  );
}

更多详情Here

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs 在使用react-hook-form和计数器时没有得到正确的值

2条答案

相关问题

热门标签

最新问答