Redux Form FieldArray 传递状态问题
Redux Form FieldArray passing state problem
我正在使用 redux-form 字段数组来制作由数据类型(选择器)、键(文本)、值(文本)组成的多个数据输入。因此,我必须通过传递 redux 状态来根据值将选择器触发到 show/hide 字段。但是我在传递数组状态时遇到了问题。这是我的代码。我试图通过 fields.map 但它没有用。有什么建议吗?
{/* <li class="list-group-item">
{(touched || submitFailed) && error && <span>{error}</span>}
</li> */}
{fields.map((member, index) => ( <<<<<<<<<<<<<<<<<<<<<<<< how can i pass this to state?
<li class="list-group-item" key={index}>
{/* <h4>Member #{index + 1}</h4> */}
<div class="form-row">
<Field
name={`${member}.tipeData`} <<<< how can i pass this ${member} to state?
component={renderDropdown}
// data={colors}
valueField="value"
textField="color"/>
{member}
<Field
name={`${member}.key`}
label="Key"
type="text"
component={renderField}
/>
{tipeDataValue === 'String' && <>
<Field
name={`${member}.value`}
type="text"
label="Value"
placeholder="bundle"
component={renderField}
/></>}
{tipeDataValue === 'Integer' && <>
<Field
name={`${member}.value`}
type="number"
label="Value"
placeholder="bundle"
component={renderField}
/></>}
{tipeDataValue === 'Boolean' && <>
<Field
name="tipeData"
component={renderBoolean}
data={colors}
valueField="value"
textField="color"/>
</>}
<div class="col">
<button
class="form-control btn btn-danger"
type="button"
title="Remove Member"
onClick={() => fields.remove(index)}
>X</button>
</div>
</div>
</li>
))}
FieldArraysForm = reduxForm({
form: "fieldArrays",
// validate
})(FieldArraysForm);
const selector = formValueSelector('fieldArrays') // <-- same as form name
FieldArraysForm = connect(
state => {
// can select values individually
// const member = selector(state, fields)
const tipeDataValue = selector(state, 'tipeData')
// or together as a group
return {
tipeDataValue,
}
}
)(FieldArraysForm)
export default FieldArraysForm
也许可以尝试合并您的 reduxForm 并连接调用。
我的项目使用这种风格:
const formname = 'fieldArrays'
const selector = formValueSelector(formname)
class FieldArraysForm extends Component {
render() {
const {tipeData } = this.props
...
return(
...
)
}
}
export default compose(
connect(state => ({
tipeDataValue: selector(state,'tipeData')
})),
reduxForm({
form: formname,
}),
)(FieldArraysForm)
我正在使用 redux-form 字段数组来制作由数据类型(选择器)、键(文本)、值(文本)组成的多个数据输入。因此,我必须通过传递 redux 状态来根据值将选择器触发到 show/hide 字段。但是我在传递数组状态时遇到了问题。这是我的代码。我试图通过 fields.map 但它没有用。有什么建议吗?
{/* <li class="list-group-item">
{(touched || submitFailed) && error && <span>{error}</span>}
</li> */}
{fields.map((member, index) => ( <<<<<<<<<<<<<<<<<<<<<<<< how can i pass this to state?
<li class="list-group-item" key={index}>
{/* <h4>Member #{index + 1}</h4> */}
<div class="form-row">
<Field
name={`${member}.tipeData`} <<<< how can i pass this ${member} to state?
component={renderDropdown}
// data={colors}
valueField="value"
textField="color"/>
{member}
<Field
name={`${member}.key`}
label="Key"
type="text"
component={renderField}
/>
{tipeDataValue === 'String' && <>
<Field
name={`${member}.value`}
type="text"
label="Value"
placeholder="bundle"
component={renderField}
/></>}
{tipeDataValue === 'Integer' && <>
<Field
name={`${member}.value`}
type="number"
label="Value"
placeholder="bundle"
component={renderField}
/></>}
{tipeDataValue === 'Boolean' && <>
<Field
name="tipeData"
component={renderBoolean}
data={colors}
valueField="value"
textField="color"/>
</>}
<div class="col">
<button
class="form-control btn btn-danger"
type="button"
title="Remove Member"
onClick={() => fields.remove(index)}
>X</button>
</div>
</div>
</li>
))}
FieldArraysForm = reduxForm({
form: "fieldArrays",
// validate
})(FieldArraysForm);
const selector = formValueSelector('fieldArrays') // <-- same as form name
FieldArraysForm = connect(
state => {
// can select values individually
// const member = selector(state, fields)
const tipeDataValue = selector(state, 'tipeData')
// or together as a group
return {
tipeDataValue,
}
}
)(FieldArraysForm)
export default FieldArraysForm
也许可以尝试合并您的 reduxForm 并连接调用。
我的项目使用这种风格:
const formname = 'fieldArrays'
const selector = formValueSelector(formname)
class FieldArraysForm extends Component {
render() {
const {tipeData } = this.props
...
return(
...
)
}
}
export default compose(
connect(state => ({
tipeDataValue: selector(state,'tipeData')
})),
reduxForm({
form: formname,
}),
)(FieldArraysForm)