在react中重置表单时如何同步select的值

Question

我有这个表单，当我发送它时我想重置它，但是选择和输入的值取决于状态。当我重置它时，选择具有值

import {
  FormEvent,
  useState,
} from "react";
import "./styles.css";

export default function App() {
  const [variable, setVariable] = useState("0");

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

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    event.currentTarget.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <select onChange={handleChange} value={variable} defaultValue={variable}>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <input type="text" value={variable} />
      <input defaultValue={"for check reset"}></input>
      <input type="submit" />
    </form>
  );
}

https://codesandbox.io/p/sandbox/form-sync-select-reset-ts-m57lkh?file=%2Fsrc%2FApp.tsx%3A8%2C37

我尝试使用值、defaultValue、defaultChecked 和选项“selected= {variable === value}”，但没有任何效果。我想避免使用外部库

Answer 1

通过handleSubmit调用中的“变量”的setter函数重置怎么样？

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setVariable("0")
  };

我想你想把这个发送到某个地方？在这种情况下，您可以直接调用 api 并跟进重置，或者在成功后通过将该操作异步传递给 .then...

来延迟重置

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    yourApiCall().then(() => {setVariable("0")})
  };