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

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

这和这个问题有点类似。有两种方法可以更新对象。正如其他人所说，像这样的嵌套状态是一种反模式。这是关于原因的很好的读物。

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-使用扩展运算符：

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