Javascript 使用Redux和ant设计表单的最佳解决方案

我正在使用ant design基于干净的UI模板构建一个web应用程序。下面是我关于在项目中使用redux的问题。在ant设计中使用Redux的最佳实践是什么？我应该使用Redux表单还是RC表单？是否有任何内置的ant design解决方案可以使用Redux

第二个问题： 我正在尝试使用复选框组构建表单。当我的每个复选框都被选中时，redux中的状态将发生变化，但我无法在UI中设置状态值。如何使用“mapPropsToFields”

这是我的密码：

import React from 'react'
import { connect } from 'react-redux'
import { Checkbox, Row, Col, Form } from 'antd'

function onChange(checkedValues) {
  console.log('checked = ', checkedValues)
}

const group = ["Trustee", "Defendant", "Client", "Applicant", "Potential Client", "Third Party", "Client Contact", "Family Law Interest", "Barrister", "Husband", "Correspondence", "Doctor", "Court", "Wife", "ICL", "Test Contact GRP", "Solicitor", "Potential Conflict", "sahar_contact_grp", "Plaintiff", "BBS Creditor", "Expert Witness",];

class ContactGroups extends React.Component {
  render() {
    const { form } = this.props
    const { getFieldDecorator } = form
    return (
      <Form>
        <Form.Item>
          {getFieldDecorator('groups', {
            valuePropName: 'checked',
          })(
            <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
              <Row>
                {groupe.map(item => (
                  <Col span={8} key={item}>
                    <Checkbox value={item}>{item}</Checkbox>
                  </Col>
                ))}
              </Row>
            </Checkbox.Group>,
          )}
        </Form.Item>
      </Form>
    )
  }
}

const NewContactGroups = Form.create({
  name: 'new_contact_contactGroup',
  onFieldsChange(props, changedFields) {
    const { dispatch } = props
    dispatch({
      type: 'contact/SET_STATE',
      payload: changedFields,
    })
  },
  mapPropsToFields(props) {
    return {
      groups: Form.createFormField(props.groups),
    }
  },
})(ContactGroups)

const mapStateToProps = state => {
  return state.contact
}

export default connect(mapStateToProps)(NewContactGroups)

从“React”导入React
从“react redux”导入{connect}
从“antd”导入{复选框，行，列，窗体}
函数onChange（checkedValues）{
log（'checked='，checkedValues）
}
const group=[“受托人”、“被告”、“客户”、“申请人”、“潜在客户”、“第三方”、“客户联系人”、“家庭法利益”、“大律师”、“丈夫”、“通信”、“医生”、“法庭”、“妻子”、“ICL”、“测试联系人GRP”、“律师”、“潜在冲突”、“sahar_联系人GRP”、“原告”、“BBS债权人”、“专家证人”]；
类ContactGroups扩展React.Component{
render（）{
const{form}=this.props
const{getFieldDecorator}=form
返回(
{getFieldDecorator（'组'{
valuePropName:'已选中'，
})(
{groupe.map（项=>(
{item}
))}
,
)}
)
}
}
const NewContactGroups=Form.create({
名称：“新建联系人联系人组”，
onfielschange（道具、变更场）{
const{dispatch}=props
派遣({
类型：“接触/设置状态”，
有效载荷：更改字段，
})
},
mapPropsToFields（道具）{
返回{
组：Form.createFormField（props.groups），
}
},
})（联络小组）
常量mapStateToProps=状态=>{
返回状态.contact
}
导出默认连接（MapStateTops）（新建联系人组）

您可以将此样板文件与ant设计一起使用。这与ant设计配合得很好。

---

欢迎来到SO。请务必只使用链接回答问题。总是有可能这个链接会停止工作，然后答案将不会帮助未来的读者。