从 redux-devtools 更改值后选择框未更改 [英] Select box not changing after changing the value from redux-devtools
问题描述
语言环境处于我的 redux 应用程序状态.通过 react-devtools(还原选项)更改其值，会更改段落内部值，但不会更改选择框值.如果它再次呈现，它不应该采用与 p 标签内部相同的值吗?
从react"导入 React, {Component, PropTypes}从'react-intl'导入{defineMessages，injectIntl，intlShape}const 消息 = 定义消息({西班牙语: {id: 'languageSelector.spanish',描述: '选择语言',defaultMessage: '西班牙语'},英语: {id: 'languageSelector.english',描述: '选择语言',默认消息:'英语'},法语: {id: 'languageSelector.french',描述: '选择语言',defaultMessage: '法语'}})类 LanguageSelector 扩展组件 {使成为 () {const {formatMessage, locale} = this.props.intl返回 (<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></选择><p>{locale}</p>)}句柄变化(e){this.props.onChange(e.target.value)}}LanguageSelector.propTypes = {国际:intlShape.isRequired，onChange: PropTypes.func.isRequired}导出默认的 injectIntl(LanguageSelector)
将 defaultValue 更改为 value.即
说明
仅当表单字段是不受控制的组件时才使用 defaultValue.更改不受控制的组件值的唯一方法是通过用户输入.
如果您使用 value，则表单组件被视为受控组件.通过显式设置值，可以在后续渲染中更改其值.受控组件还必须有一个 onChange 处理程序，您的就可以.
有关受控/非受控表单组件的更多信息，请参阅React 中的表单.
locale is in my redux app state. Changing its value through react-devtools (revert option), changes paragraph inner value but not the select box value. If it renders again shouldn't it take the same value as inside the p tag?
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)
Change defaultValue to value. i.e.
<select value={locale} onChange={(e) => this.handleChange(e)}>
Explanation
You only use defaultValue when the form field is an uncontrolled component. The only way to change the value of an uncontrolled component is through user input.
If you use value then the form component is considered a controlled component. Its value can be changed in subsequent renders by setting the value explicitly. Controlled components must also have an onChange handler, which yours does.
For more information on controlled/uncontrolled form components, see Forms in React.
这篇关于从 redux-devtools 更改值后选择框未更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
