时间戳

首页 > 解决方案 > 如何更新 useState 中的变量

javascript - 如何更新 useState 中的变量

问题描述

我有以下状态

const [formData, setFormData] = useState({
  myForm: "",
});

经过一些操作后，我可以更新 formData 但是如何更新状态以在提交后清除输入字段，以便我在验证后输入的值消失？

我正在使用材质 UI

function handleFormChange(event: any) {
  let data: any = formData;
  data[event.target.name] = event.target.value;
  setFormData(data);
  console.log(data);
}

使用这种方法，我当然可以在每次更改输入字段时控制台日志，并使用它来处理表单的提交

const handleSubmit = (e: any) => {
  e.preventDefault();
  if (...) { //if myform is validated
    //clear the input field here
  ;

        <form onSubmit={handleSubmit} id="add-form">
      <TextField
        name="myForm"
        label="Enter Value"
       
        onChange={handleFormChange}
        defaultValue={""}
       
      />

      <Button
        type="submit"
        name="add-button"
        disabled={!buttonDisable}
        onClick={() => {
          validate;
        }}
      >
        Add
      </Button>
    </form>

标签： javascriptreactjsvalidationreact-hooks

解决方案

由于您使用的是defaultValue道具，因此您在技术上使用的是不受控制的输入。

你可以：

  1. 保持输入不受控制并通过表单的onSubmit事件清除输入的值。

    const handleSubmit = e => {
  e.preventDefault();

  e.target.myForm.value = ''; // <-- clear input's value
  ...
}

    您也可以调用e.target.reset();简单地重置整个表单。

  2. 将其转换为受控输入并清除 state 中的值。

    const handleSubmit = e => {
  e.preventDefault();

  setFormData(formData => ({
    ...formData,
    myForm: '', // <-- clear upon submission
  }));
  ...
}

...

<TextField
  name="myForm"
  label="Enter Value"
  onChange={handleFormChange}
  value={formData.myForm} // <-- use value attribute
/>

此外，您可能不想onClick在表单提交按钮上混合处理程序。在提交处理程序中进行字段验证。

推荐阅读