response-md SelectField onChange не обновляется должным образом

Question

Я использую библиотеку 'react-md' и пытаюсь использовать компонент SelectField, но когда я отправляю функцию для onChange, поле выбора больше не обновляется, как положено.

handleSelection = (value, index, event, details) => {
  // "details.id" is the id of the field which I am using to keep track of state  
  this.setState({[details.id]: value});
}

render() {
  const STRING_SELECTORS = ['At most', 'At least'];

  return(
  <div>
   <SelectField
     id="calories-selector"
     className="md-cell selector md-cell--5"
     menuItems={STRING_SELECTORS}
     defaultValue="At most"
     onChange={this.handleSelection)
   />
  )
}

Когда я не вызываю this.setState() в функции handleSelection, меню изменяется, как и ожидалось, при нажатии на элемент, однако, когда я вызываю setState, оно обновляет выбор с задержкой. Если в меню написано «Максимум», и я нажимаю «Минимум», оно останется на уровне «Максимум», затем, если я нажму «Максимум», оно будет , а затем изменит «Минимум».

У меня была похожая проблема с полями ввода, и для ее решения я использовал onBlur вместо onChange, но onBlur библиотеки react-md не вызывается так, как мне нужно.

Answer 1

Вы можете использовать значение prop компонента SelectField. Создайте состояние и свяжите его с пропеллером значения SelectField и обновите состояние при событии onChange до выбранного значения.