清除处于状态的对象中的键

Question

我有一个组件，它作为一个道具发送一个方法来改变表单的输入值（像任何基本表单一样）。在onChange开始工作后，我决定添加一个clear按钮来一次清除所有输入值，因此我创建了一个方法来清除所有输入。

示例：

class ComponentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formInputs: {
        inputOne: "",
        inputTwo: "",
        inputThree: ""
      }
    };
  };

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

  clearInputs = () => {
    /* this is problematic, because I'm setting the input from defined to undefined */
    this.setState({ formInputs: {} });
  };

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

像上面的方法那样清除会产生一个错误，因为我要移除state中的键，而表单输入的值是针对state的。没问题，所以我想，我只需要将setState中的所有输入添加到一个空字符串，如:this.setState（{forminputs：{inputone：“”,inputtwo：“”,inputthree：“”}}）；which works。但是我有很多输入需要清除，所以这种方法可能也不是最有效的。话虽如此，是否有更有效的方法来清除状态中的“ForminPuts”对象中的每一个？

Answer 1

您可以在组件外部（也可以在组件内部）的单独变量中定义初始状态，并使用它不仅初始化状态，还可以在clearinputs函数中将状态重置为它。