Поле выбора не меняется после изменения значения из redux-devtools

locale находится в моем состоянии приложения Redux. Изменение его значения с помощью средства реагирования (опция возврата) изменяет внутреннее значение абзаца, но не значение поля выбора. Если он снова отобразится, не должен ли он принимать то же значение, что и внутри тега p?

import React, {Component, PropTypes} from 'react'
import {defineMessages, injectIntl, intlShape} from 'react-intl'
const messages = defineMessages({
  spanish: {
    id: 'languageSelector.spanish',
    description: 'Select language',
    defaultMessage: 'Spanish'
  },
  english: {
    id: 'languageSelector.english',
    description: 'Select language',
    defaultMessage: 'English'
  },
  french: {
    id: 'languageSelector.french',
    description: 'Select language',
    defaultMessage: 'French'
  }
})

class LanguageSelector extends Component {
    render () {
      const {formatMessage, locale} = this.props.intl
      return (
        <div>
        <select defaultValue={locale} onChange={(e) => this.handleChange(e)}>
                <option id='es' value='es'>{formatMessage(messages.spanish)}</option>
                <option id='fr' value='fr'>{formatMessage(messages.french)}</option>
                <option id='en' value='en'>{formatMessage(messages.english)}</option>
        </select>
        <p>{locale}</p>
        </div>
        )
    }
    handleChange (e) {
      this.props.onChange(e.target.value)
    }
}

LanguageSelector.propTypes = {
  intl: intlShape.isRequired,
  onChange: PropTypes.func.isRequired
}
export default injectIntl(LanguageSelector)

person user2670996    schedule 26.01.2016    source источник


Ответы (1)


Измените defaultValue на value. то есть

<select value={locale} onChange={(e) => this.handleChange(e)}>

Объяснение

Вы используете defaultValue только в том случае, если поле формы является неуправляемым компонентом. Единственный способ изменить значение неконтролируемого компонента — это ввод данных пользователем.

Если вы используете value, то компонент формы считается управляемым компонентом. Его значение можно изменить в последующих рендерах, установив значение явно. У управляемых компонентов также должен быть обработчик onChange, который есть у вашего.

Дополнительные сведения о контролируемых/неконтролируемых компонентах форм см. в разделе Формы в React.

person David L. Walsh    schedule 26.01.2016