Javascript react redux表单无线电字段未更新选中的道具
我有一个组件,它创建了一个包含无线电输入列表的字段。创建的组件似乎工作正常,呈现正确,分派正确的redux操作,并正确更新其状态。但是,所选的无线电输入从未在UI中进行检查Javascript react redux表单无线电字段未更新选中的道具,javascript,reactjs,redux,immutable.js,react-redux-form,Javascript,Reactjs,Redux,Immutable.js,React Redux Form,我有一个组件,它创建了一个包含无线电输入列表的字段。创建的组件似乎工作正常,呈现正确,分派正确的redux操作,并正确更新其状态。但是,所选的无线电输入从未在UI中进行检查 import React from 'react'; import Immutable from 'immutable'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; impor
import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Field } from 'react-redux-form/immutable';
const RadioField = ({ fieldId, label, model, hasError, options }) => {
const error = hasError ? 'has-error' : '';
return (
<div className={`form-group ${error}`}>
<label className="control-label" htmlFor={fieldId}>{label}</label>
<Field model={model} id={fieldId} >
{options.map(option => (
<label
key={`${fieldId}-${option.get('id')}`}
htmlFor={`radio-${fieldId}-${option.get('value')}`}
className="radio-inline"
>
<input
id={`radio-${fieldId}-${option.get('value')}`}
value={`${option.get('value')}`}
type="radio"
/>
{option.get('display')}
</label>
))}
</Field>
</div>
);
};
RadioField.defaultProps = {
fieldId: 'radio-field-id',
label: 'Radio Field:',
model: '.radio',
hasError: false,
options: Immutable.List(),
};
RadioField.propTypes = {
fieldId: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
model: PropTypes.string.isRequired,
hasError: PropTypes.bool,
options: ImmutablePropTypes.listOf(
ImmutablePropTypes.shape({
id: PropTypes.number,
display: PropTypes.string,
value: PropTypes.any,
}),
).isRequired,
};
export default RadioField;
从“React”导入React;
从“不可变”导入不可变;
从“道具类型”导入道具类型;
从“react immutable proptypes”导入ImmutablePropTypes;
从'react redux form/immutable'导入{Field};
const RadioField=({fieldId,label,model,hasError,options})=>{
const error=hasError?'has error':'';
返回(
{label}
{options.map(option=>(
{option.get('display')}
))}
);
};
RadioField.defaultProps={
fieldId:'无线电字段id',
标签:“无线电场:”,
型号:'.radio',
错误:错,
选项:Immutable.List(),
};
RadioField.propTypes={
fieldId:PropTypes.string.isRequired,
标签:PropTypes.string.isRequired,
型号:PropTypes.string.isRequired,
hasError:PropTypes.bool,
选项:ImmutablePropTypes.listOf(
ImmutablePropTypes.shape({
id:PropTypes.number,
显示:PropTypes.string,
值:PropTypes.any,
}),
).要求,
};
导出默认无线电场;
我的直觉告诉我这与字段
无法正确定位具有所选值的输入有关,或者redux状态没有正确传递给字段的子控件
组件
任何帮助都将不胜感激。谢谢 在进一步研究该问题后,发现创建的不可变控件。radio
组件没有从应用程序的redux状态获取modelValue。将带有输入的字段中的组件更改为多个通用控制组件,并为它们提供适当的无线电输入道具,似乎可以解决问题
下面是代码的样子
import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Control } from 'react-redux-form/immutable';
const RadioField = ({ fieldId, label, model, hasError, options }) => {
const error = hasError ? 'has-error' : '';
return (
<div className={`form-group ${error}`}>
<label className="control-label" htmlFor={fieldId}>{label}</label>
<div id={fieldId}>
{options.map(option => (
<label key={`${fieldId}-${option.get('id')}`} htmlFor={`${fieldId}-${option.get('id')}`} className="radio-inline">
<Control
id={`${fieldId}-${option.get('id')}`}
value={option.get('value')}
model={model}
isToggle
type="radio"
/>
{option.get('display')}
</label>
))}
</div>
</div>
);
};
RadioField.defaultProps = {
fieldId: 'radio-field-id',
label: 'Radio Field:',
model: '.radio',
hasError: false,
options: Immutable.List(),
};
RadioField.propTypes = {
fieldId: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
model: PropTypes.string.isRequired,
hasError: PropTypes.bool,
options: ImmutablePropTypes.listOf(
ImmutablePropTypes.shape({
id: PropTypes.number,
display: PropTypes.string,
value: PropTypes.any,
}),
).isRequired,
};
export default RadioField;
从“React”导入React;
从“不可变”导入不可变;
从“道具类型”导入道具类型;
从“react immutable proptypes”导入ImmutablePropTypes;
从'react redux form/immutable'导入{Control};
const RadioField=({fieldId,label,model,hasError,options})=>{
const error=hasError?'has error':'';
返回(
{label}
{options.map(option=>(
{option.get('display')}
))}
);
};
RadioField.defaultProps={
fieldId:'无线电字段id',
标签:“无线电场:”,
型号:'.radio',
错误:错,
选项:Immutable.List(),
};
RadioField.propTypes={
fieldId:PropTypes.string.isRequired,
标签:PropTypes.string.isRequired,
型号:PropTypes.string.isRequired,
hasError:PropTypes.bool,
选项:ImmutablePropTypes.listOf(
ImmutablePropTypes.shape({
id:PropTypes.number,
显示:PropTypes.string,
值:PropTypes.any,
}),
).要求,
};
导出默认无线电场;
我将研究如何重新创建该问题,并在react redux表单的github上提交一个问题。我也有相同/类似的问题,我的解决方法是
不起作用,但起作用。