时间戳

首页 > 解决方案 > 如何在反应中设置类属性的值

javascript - 如何在反应中设置类属性的值

问题描述

如何访问和设置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;

标签： javascriptreactjs

解决方案

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

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

推荐阅读