best solution to using Redux with ant design form

I'm building a web application based on Clean-UI template using ant design. here is my question about using redux in my project. what is best practice to using Redux with ant design? should I use Redux-form or RC-form? is there any built-in solution with ant design to using Redux?

second question : I'm trying to build a form with a checkbox group. when each of my checkboxes is checked the state in redux will change but I'm not able to set state value in my UI. how can I use "mapPropsToFields"?

here is my code :

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)

Answers:

Answer

You can use this boilerplate along with ant design . This works fine with ant design. https://github.com/react-boilerplate/react-boilerplate

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.