javascript - 是否可以使用相同的函数在不同的对象上设置状态

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')