Question

如何使用e.target.value访问和设置班级的动态setState？

我尝试过this.setState({fields[e.target.name]: e.target.value});

class App extends Component  {
  constructor() {
    super();
    this.state = {
      data: [],
      fields: {
        name: ''
      }
    }
  }

  handleChange = e => this.setState({fields[e.target.name]: e.target.value});

  render() {
    const { fields } = this.state;
   
    return (
      <>
        <input type="text" name="name" placeholder="name" onChange={this.handleChange} value={fields.name} />
      </>
    )
  }
}

export default App;

Answer 1

您无法访问这样的状态属性。一种可能的解决方案是从fields创建一个副本，修改值，然后设置新状态，如下所示：

handleChange = e => {  
    // The line below creates a copy of the state, using the spread operator
    let fields = { ...this.state.fields };
    fields[e.target.name] =  e.target.value
    this.setState({fields});
}

Answer 2

这与question有点类似。有两种更新对象的方法。正如其他人所说，这样的嵌套状态是一种反模式。 This是为什么的很好的读物。

1-最简单的一个：

首先创建fields的副本，然后执行以下更改：

let fields = Object.assign({}, this.state.fields);    //creating copy of object
fields[e.target.name] =  e.target.value               //updating value
this.setState({fields});

我们也可以这样写，而不是使用Object.assign：

let fields = {...this.state.fields};

2-使用spread operator ：

  handleChange = e => {
    e.persist(); //need to make the values persist because of event pooling
    this.setState(prevState => ({
      ...prevState,
      fields: {
        [e.target.name]: e.target.value
      }
    }))
  }

如何在React中设置类属性的值

2 个答案: