React类Material-UI受控表单提交后无法清空输入框的解决

失效的核心原因 #

之前两次尝试重置都没生效，根本不是重置代码写得有问题，是组件本身的状态逻辑从初始化阶段就存在错误：

• 状态初始化完全错位
  你在constructor里连续5次直接给this.state整体赋值：

  // 原错误代码
  this.state = { name: "" };
  this.state = { email: "" };
  this.state = { number: "" };
  this.state = { message: "" };
  this.state = { subject: "" };
  

  每次整体给this.state赋值都会完全替换掉整个state对象，不会自动合并字段。等constructor执行完，实际存活的state里只剩最后一行定义的subject字段。
  更关键的是你在类定义的render方法上方，额外写了一行类属性state = {};，这行代码会直接覆盖constructor里初始化的所有state，把整个state变成空对象。等于你之前代码里读取的this.state.name、this.state.email这些字段从来没有真实存在过。
  你之前尝试把状态设为空字符串时，其实是在一个被覆盖成空对象的state上零散加属性，这种赋值方式不会被React的状态系统识别，自然不会触发界面更新。
• 原生表单reset对受控组件无效
  你用的是完全受控的MUI TextField，每个输入框的显示值完全由React状态驱动。原生event.target.reset()只会重置DOM层面原生input的内置值，但是受控组件在重渲染时会自动把状态值重新填充回输入框，相当于DOM刚清空就被React重新渲染回原来的值，自然看不到任何重置效果。

具体修复步骤 #

1. 修正状态初始化逻辑 #

把constructor里零散的state赋值合并为一个完整的初始化对象，删掉类定义里多余的state = {}错误代码：

constructor(props) {
  super(props);
  // 所有状态合并到同一个对象中初始化
  this.state = {
    name: "",
    email: "",
    number: "",
    message: "",
    subject: ""
  };
  // 事件绑定逻辑保持不变
  this.handleChangeName = this.handleChangeName.bind(this);
  this.handleChangeEmail = this.handleChangeEmail.bind(this);
  this.handleChangeNumber = this.handleChangeNumber.bind(this);
  this.handleChangeMessage = this.handleChangeMessage.bind(this);
  this.handleChangeSubject = this.handleChangeSubject.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}
// 务必删掉类里的这行代码，这是导致状态被清空的元凶
// state = {};

2. 提交完成后统一重置状态 #

等接口请求执行完毕后，一次性调用setState把所有绑定的状态值重置为空字符串。因为输入框是受控组件，状态变化会自动同步到界面，不需要依赖原生表单方法：

async handleSubmit(event) {
  event.preventDefault();

  const data = {
    name: this.state.name,
    email: this.state.email,
    phone: this.state.number,
    subject: this.state.subject,
    text: this.state.message,
  };
  const url = "http://localhost:3030/send-email";
  const result = await fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json",
    },
  });
  console.log(result);

  // 接口返回后重置所有表单状态
  this.setState({
    name: "",
    email: "",
    number: "",
    message: "",
    subject: ""
  });
}

注：对于完全受控的MUI组件，不需要额外调用原生表单的reset()方法，状态本身已经完全驱动了输入框的显示内容，多余的DOM操作反而可能引发渲染冲突。

内容的提问来源于stack exchange，提问作者Ingi Mohamed