Select 从 redux-devtools 更改值后框未更改

Question

语言环境处于我的 redux 应用程序状态。通过 react-devtools（还原选项）更改其值，更改段落内部值但不更改 select 框值。如果它再次呈现，它不应该采用与 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)

Answer 1

将 defaultValue 更改为 value。即

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

说明

只有在表单域是 不受控制的组件 时才使用 defaultValue。更改不受控组件的值的唯一方法是通过用户输入。

如果您使用 value，则表单组件将被视为 受控组件。通过显式设置值，可以在后续渲染中更改其值。受控组件还必须有一个 onChange 处理程序，你的也有。

有关 controlled/uncontrolled 表单组件的详细信息，请参阅 Forms in React。

Select 从 redux-devtools 更改值后框未更改

Select box not changing after changing the value from redux-devtools

redux

redux-devtools

说明