React.js, почему setState меняет все значения состояния?

Question

Почему setState() меняет все значения состояния? У меня 4 входа. Первые два входа используют функцию автозаполнения входа из карт google 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" />