javascript - 将 Redux 与 ant design 表单结合使用的最佳解决方案

Question

我正在使用 ant design 构建一个基于 Clean-UI 模板的 Web 应用程序。这是我关于在我的项目中使用 redux 的问题。将 Redux 与 ant design 结合使用的最佳实践是什么？我应该使用 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)

Answer 1

您可以将此样板与 ant design 一起使用。这与 ant design 配合得很好。 https://github.com/react-boilerplate/react-boilerplate