如何更新useState中的变量

Question

我有以下状态

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>

Answer 1

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

您可以：

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

   const handleSubmit = e => {
   e.preventDefault();
   e.target.myForm.value = ''; // <-- clear input's value
   ...
   }
   

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

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

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

Answer 2

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

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