無法清除狀態并從useState表單得到錯誤回應

我在打字稿反應中苦苦掙扎。基本上我創建了 2 個簡單的組件Button，Input并將它們添加到另一個組件Form中，在那里我創建了一個完整的表單。

提交后我應該得到這樣的東西：

telephone: "323423234"
email: "[email protected]"
message: "weklfnwlkf"
name: "less"
surname: "mess"

但是提交后我得到了這樣的奇怪回復：

"": "323423234"
email: "[email protected]"
message: "weklfnwlkf"
name: "less"
surname: "mess"
telephone: ""

這有點 werido，因為我幾天前做了類似的事情，現在不知道該做什么。有我的Form代碼示例

const Form = () => {
  interface FormDataType {
    telephone: string;
    name: string;
    surname: string;
    email: string;
    message: string;
  }
  const formData: FormDataType = {
    telephone: '',
    name: '',
    surname: '',
    email: '',
    message: '',
  };
  const [responseBody, setResponseBody] = useState<FormDataType>(formData);

  const clearState = () => {
    setResponseBody({ ...formData });
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setResponseBody({ ...responseBody, [name]: value });
  };
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(responseBody);
    clearState();
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        {FormData.map((option) => (
          <Input
            key={option.name}
            label={option.label}
            type={option.type}
            className={option.className}
            name={option.name}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
              handleChange(e)
            }
          />
        ))}
        <div className='div'>
          <Button
            type='submit'
            title={'Simple test'}
            className={'btn-primary'}
          />
        </div>
      </form>
    </>
  );
};
export default Form;

當我呼叫handleSubmit函式clearState()時，它不會重繪 網頁輸入中的狀態。

uj5u.com熱心網友回復：

我希望這是它所需要的，我做了一些更改，但是您可以將其調整到您的專案中

export default function App() {
  interface FormDataType {
    telephone: string;
    name: string;
    surname: string;
    email: string;
    message: string;
  }
  const formData: FormDataType = {
    telephone: "",
    name: "",
    surname: "",
    email: "",
    message: ""
  };

  const [values, setValues] = useState<FormDataType | any>(formData);

  // reset
  const reset = (newFormState = formData) => {
    setValues(newFormState);
  };

  // handleInputChange
  const handleInputChange = ({ target }: any) => {
    setValues({ ...values, [target.name]: target.value });
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(values);
    reset();
  };

  const data = [
    {
      type: "text",
      name: "name"
    },
    {
      type: "text",
      name: "surname"
    },
    {
      type: "email",
      name: "email"
    },
    {
      type: "tel",
      name: "telephone"
    },
    {
      type: "text",
      name: "message"
    }
  ];

  return (
    <>
      <form onSubmit={handleSubmit}>
        {data.map((option) => (
          <input
            key={option.name}
            value={values[option.name]}
            type={option.type}
            name={option.name}
            placeholder={option.name}
            onChange={handleInputChange}
          />
        ))}
        <div className="div">
          <button type="submit">Simple test</button>
        </div>
      </form>
    </>
  );
}

uj5u.com熱心網友回復：

您的重置不起作用，因為您的輸入不受控制。

為了讓它們正確重置，你應該通過傳遞一個value道具來控制它們。它看起來像這樣：

<Input
  key={option.name}
  label={option.label}
  type={option.type}
  className={option.className}
  name={option.name}
  value={responseBody[option.name]} // Add this
  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
    handleChange(e)
  }
/>

這會將responseBody表單資料與輸入值連接起來。

至于奇怪的控制臺記錄值，似乎至少有一個option.name值是空的/未定義的（看起來像電話物件）。驗證是否FormData包含完整且正確的值。

標籤：javascript反应打字稿反应钩子

上一篇：即使收到錯誤的登錄憑據（存盤在firebasefirestore中），登錄按鈕也會導航到另一個頁面

下一篇：使用鍵和值陣列生成地址字串