reactjs - Redux Form FieldArray 传递状态问题
问题描述
我正在使用 redux-form 字段数组来进行由数据类型(选择器)、键(文本)、值(文本)组成的多个数据输入。所以,我必须通过传递 redux 状态来触发选择器以根据值显示/隐藏字段。但我在传递数组状态时遇到了问题。这是我的代码。我试图通过 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)
推荐阅读
- sql - 访问:如何在一个查询中汇总多个表的字段?
- python - 分段函数 Pyomo
- javascript - 我对表达式语句的理解是否正确?
- android - 如何将 Lottie 文件设置为菜单项?
- sql - 返回相似数据的两个表
- c - 宏和函数?相似之处?
- sql-server - 将案例语句分配给 SQL Server 中的变量
- python - 如何在 Python 中按其名称获取一个类
- google-cloud-platform - 如何在 Google Kubernetes 上启用 Google 托管证书?
- excel - Worksheet_change 在工作表中多次粘贴后不起作用