1

我正在使用 ant 设计构建基于 Clean-UI 模板的 Web 应用程序。这是我关于在我的项目中使用 redux 的问题。将 Redux 与 ant design 结合使用的最佳实践是什么？我应该使用 Redux-form 还是 RC-form？是否有任何内置的蚂蚁设计解决方案来使用 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)
4

1 回答 1

3

您可以将此样板文件与 ant design 一起使用。这适用于 ant 设计。 https://github.com/react-boilerplate/react-boilerplate

于 2020-03-03T11:43:51.173 回答