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)} />

我在这个例子中创建一个新状态而不是更新目标对象。

整个测试环境：

标签： javascriptreactjs

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