Question

为什么setState（）会更改所有状态值？我有4个输入。前两个输入使用google maps api的输入自动完成功能。

当我在第一个输入中输入文本时 - 自动完成功能正常工作。当我在第二个输入中输入文本时，第一个输入被覆盖。

handleChange(name, value){
    this.setState({
        [name]: value
    });
}

如果您需要更详细的背景信息，请不要犹豫，不要询问或克隆此回购：

https://github.com/malexanders/roadtrip_react

Answer 1

尝试

handleChange(name,value) {
  let newState = {}
  newState[name] = value
  this.setState(newState)
}

Answer 2

要回答你的问题，你应该改变一些事情。

首先，您不需要新对象来执行此操作。其次你应该改变你打电话的方式

<Input id="from" className={style.mapFormInput} type='text' label='Origin' hint="Enter a Location" placeholder='' name='from' value={this.state.from} onChange={this.handleChange.bind(this, 'from')} icon="add_location" />

在此行上，您已在输入中指定了名称。所以只需在你的设定状态下使用它。

handleChange = (event) => {
  this.state[event.target.name] = event.target.value
  this.setState(this.state)
}

// change your render on the input to be this

<Input id="from" className={style.mapFormInput} type='text' label='Origin' hint="Enter a Location" placeholder='' name='from' value={this.state.from} onChange={this.handleChange} icon="add_location" />

React.js，为什么setState会改变所有状态值？

2 个答案: