React类组件如何高效清空state中formInputs对象的所有输入值

两种适配现有代码结构的实现方案，可按需选择：

方案1：抽离初始表单常量模板（固定字段场景推荐） #

将表单初始结构单独维护为常量，初始化状态和清空操作复用同一份模板，后续增删字段仅需修改这一处，无需调整清空逻辑。
完整修改代码示例：

// 组件外部定义初始表单常量，字段增删仅需修改此处
const INITIAL_FORM_INPUTS = {
  inputOne: "",
  inputTwo: "",
  inputThree: "",
};

class ComponentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 浅拷贝常量，避免直接引用初始模板，防止后续修改state污染常量
      formInputs: { ...INITIAL_FORM_INPUTS }
    };
  };

  handleOnChange = (event) => {
    const { target: { name, value } } = event;
    this.setState(previousState => {
      return { formInputs: { ...previousState.formInputs, [name]: value } };
    });
  };

  // 清空逻辑直接复用初始模板
  clearInputs = () => {
    this.setState({ formInputs: { ...INITIAL_FORM_INPUTS } });
  };

  render() {
    const { formInputs } = this.state;
    return (
      <Form 
        handleOnChange={this.handleOnChange}
        clearInputs={this.clearInputs}
        formInputs={formInputs}
      />
    );
  };
};

• 优势：维护成本最低，字段结构清晰，不会出现漏改清空逻辑的问题。

方案2：遍历现有表单键生成空值（动态字段场景适用） #

如果表单字段是动态生成、需要自动适配当前已存在的字段集合，可直接遍历当前 formInputs 的所有键，批量赋值为空字符串，无需提前维护字段列表。
仅需修改 clearInputs 方法即可，有两种等价实现：

// 通用reduce写法
clearInputs = () => {
  // 遍历当前formInputs的所有键，生成全为空值的新对象
  const emptyFormInputs = Object.keys(this.state.formInputs).reduce((acc, key) => {
    acc[key] = "";
    return acc;
  }, {});
  this.setState({ formInputs: emptyFormInputs });
};

也可以用更简洁的 Object.fromEntries 实现相同效果：

clearInputs = () => {
  const emptyFormInputs = Object.fromEntries(
    Object.keys(this.state.formInputs).map(key => [key, ""])
  );
  this.setState({ formInputs: emptyFormInputs });
};

• 优势：无需提前枚举字段，新增动态字段后无需改动清空逻辑，自动适配现有字段集合。

内容的提问来源于stack exchange，提问作者David Grosh