React Material Hooks表单重置问题：设置状态无变化，提交无法清空输入框

我来帮你排查并解决这个问题～你现在遇到的问题主要有两个核心原因：状态更新的方式违反了React的不可变原则，以及输入框没有和状态做受控绑定，咱们一步步来修复：

问题1：状态更新的写法不正确 #

你在onSubmit里的状态更新代码有语法错误，而且直接修改了原状态对象（React要求状态是不可变的，不能直接赋值修改）：

setSignUpData((prev) => (prev.first_name = "",)); 

这种写法既不合法，也不会触发组件重新渲染。正确的做法是返回一个全新的状态对象：

如果表单只有first_name一个字段，直接重置即可：

const onSubmit = e => {
  e.preventDefault();
  // 返回新的状态对象重置字段
  setSignUpData({ first_name: "" });
};

如果以后表单新增其他字段，推荐用函数式更新保留其他字段（按需重置）：

const onSubmit = e => {
  e.preventDefault();
  setSignUpData(prev => ({
    ...prev, // 保留其他不需要重置的字段
    first_name: "" // 重置目标字段
  }));
};

问题2：输入框未做受控绑定 #

这是最关键的一点：你的OutlinedInput没有绑定value属性到状态，属于非受控组件——即使你更新了signUpData状态，输入框也不会同步更新内容。

必须给OutlinedInput加上value属性，把它和signUpData.first_name绑定起来：

<OutlinedInput 
  name="first_name" 
  className="create-account-input" 
  labelWidth={90} 
  disabled={loading} 
  onChange={event => handleChange("first_name", event)}
  value={signUpData.first_name} // 新增这一行，实现受控绑定
/>

完整修改后的代码示例 #

把两处修改结合起来，你的完整代码应该是这样的：

import { useState } from 'react';
import { FormControl, InputLabel, OutlinedInput, Button } from '@mui/material';

const YourComponent = () => {
  const [signUpData, setSignUpData] = useState({ first_name: "" });
  const [errorText, setErrorText] = useState({}); // 假设你有错误提示状态
  const [loading, setLoading] = useState(false);

  const handleChange = (field, event) => {
    if (event) {
      setSignUpData({ ...signUpData, [field]: event.target ? event.target.value : event });
    }
  };

  const onSubmit = e => {
    e.preventDefault();
    // 这里可以添加你的表单提交逻辑，比如API请求
    // ...
    // 提交完成后重置表单状态
    setSignUpData({ first_name: "" });
  };

  return (
    <form className="create-account-form" autoComplete="off" onSubmit={onSubmit}>
      <FormControl error={!!errorText.first_name} variant="outlined" size="small" fullWidth >
        <InputLabel>First Name</InputLabel>
        <OutlinedInput 
          name="first_name" 
          className="create-account-input" 
          labelWidth={90} 
          disabled={loading} 
          onChange={event => handleChange("first_name", event)}
          value={signUpData.first_name} // 受控绑定核心
        />
      </FormControl>
      <Button type="submit" className="submit-button" color="primary" variant="contained" >
        Submit
      </Button>
    </form>
  );
};

export default YourComponent;

这样修改后，点击提交按钮时，状态会正确更新，输入框也会因为受控绑定同步清空内容啦～

内容的提问来源于stack exchange，提问作者akash kumar