是否可以使用相同的功能在不同对象上设置状态

Question

我试图找出是否有可能捕获输入/复选框onchange事件并从同一功能更新状态？其背后的原因是我仍在学习React并想学习如何正确保存状态。

我试图通过以下方式保存状态，但我可能会犯一些错误：

constructor(props) {
    super(props);
    this.state = {
      list: [],
      test: {
        text: "placeholder",
        age: null
      },
      anotherTest: {
        name: "",
        info: ""
      }
    };

handleChange = e => {
    var target = e.target.name;
    var value = e.target.value;
    this.setState({
      ...this.state,
      [target]: value
    });
  };

和渲染器：

 <input name="text" value={this.state.test.text} onChange={e => this.handleChange(e)} />

 <input name="name" value={this.state.anotherTest.name} onChange={e => this.handleChange(e)} />

在此示例中，我正在创建一个新状态，而不是更新目标对象。

整个测试环境：

Answer 1

您快到了。只需将其更改为：

this.setState(prevState => ({
    anotherTest: {                  
        ...prevState.anotherTest,    
        [target]: 'something'       
    }
}))

如果您想重用功能，请执行以下操作：

handleChange = (e, stateValue) => 
   this.setState(prevState => ({
       [stateValue]: {                  
          ...prevState[stateValue],    
          [target]: 'something'       
       }
   }))

然后这样称呼它：

e => this.handleChange(e, 'name')

或

e => this.handleChange(e, 'anotherTest')