Question

我有以下状态

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

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

我正在使用 Material 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>

Answer 1

您的问题不清楚，但您可以通过以下方式在提交表单数据后进行不清楚的输入。

const handleSubmit = (e: any) => {
  e.preventDefault();
  if (...) { //if myform is validated
    //clear the input field here
    let tempFormData = {...formData};
    tempFormData.myForm = "";
    setFormData(tempFormData);
}

Answer 2

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

您可以：

保持输入不受控制并通过表单的 onSubmit 事件清除输入的值。
```
const handleSubmit = e => {
  e.preventDefault();

  e.target.myForm.value = ''; // <-- clear input's value
  ...
}
```
您也可以调用 e.target.reset(); 来简单地重置整个表单。

将其转换为受控输入并清除状态中的值。

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 处理程序。在提交处理程序中进行字段验证。

如何更新 useState 中的变量

2 个答案: