react 手写移动端radio&&checkbox组件支持rc-form的使用

1.文件目录：

2.代码地址：

https://github.com/wangchun123/react-Ant-Design-Mobile/tree/master/src/components

3.checkbox的调用代码：

import React, { Component } from 'react';
import Checkbox from '@/components/checkbox';
import './index.scss';
export default class index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
      defaultValue: '',
    };
  }

  componentDidMount() {
    this.setState({
      dataSource: [
        { label: 'test1', value: '1' },
        { label: 'test2', value: '2' },
        { label: 'test3', value: '3' },
        { label: 'test4', value: '4' },
        { label: 'test5', value: '5' },
        { label: 'test6', value: '6' },
      ],
      defaultValue: '1',
    });
  }

  render() {
    return (
      <div>
        <Checkbox
          dataSource={this.state.dataSource}
          defaultValue={this.state.defaultValue}
          onChange={(val) => console.log(val)}
          // radioLayout="inline"
          itemClassName="some"
          size="large"
        ></Checkbox>
      </div>
    );
  }
}

4.radio调用代码-支持rc-form的使用：

import React, { Component } from 'react';
import Radio from '@/components/radio';
import { Modal } from 'antd-mobile';
import { createForm } from 'rc-form';
import './index.scss';

const alert = Modal.alert;

class index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
      defaultValue: '',
    };
  }

  componentDidMount() {
    // console.log('this.props', this.props.form.getFieldsValue());

    // console.log('this.props', this.props.form.setFieldsValue({ age: '6' }));

    this.setState({
      dataSource: [
        { label: 'test1', value: '1' },
        { label: 'test2', value: '2' },
        { label: 'test3', value: '3' },
        { label: 'test4', value: '4' },
        { label: 'test5', value: '5' },
        { label: 'test6', value: '6' },
      ],
      defaultValue: '1',
    });
  }

  render() {
    return (
      <form>
        <Radio
          dataSource={this.state.dataSource}
          // defaultValue={this.state.defaultValue}
          // value="1"
          onChange={(val) => console.log(val)}
          // radioLayout="inline"
          itemClassName="some"
          size="large"
          {...this.props.form.getFieldProps('age', {
            // initialValue: '6',
            rules: [
              { required: true, message: '请选择radio' },
              // { validator: this.validateAccount },
            ],
          })}
        ></Radio>
        <button
          onClick={() =>
            this.props.form.validateFields({ force: true }, (error) => {
              if (!error) {
                console.log(this.props.form.getFieldsValue());
              } else {
                alert(
                  '校验错误',
                  this.props.form.getFieldError('age').join(','),
                );
                console.log(this.props.form.getFieldError('age').join(','));
              }
            })
          }
        >
          提交
        </button>
      </form>
    );
  }
}

export default createForm()(index);

5.总结：

手写组件的初衷是，antd-mobile组件库的组件不能满足业务需求。所以自己写了移动端单选，复选组件。如果你们看代码发现css是px不用奇怪是框架采用了postcss-plugin-px2rem插件具体api可以查阅https://www.npmjs.com/package/postcss-plugin-px2rem 写完以后发现不能兼容rc-form配合使用，rc-form使得移动端表单具备form的能力。如果你现在还是用class组件具体api可以查阅https://www.npmjs.com/package/rc-form如果你是hooks的爱好者具体api可以查阅https://www.npmjs.com/package/rc-form-hooks

以上的radio调用就结合了rc-form一起。具体注意的点是，组件具备onChange属性就是收集组件的value值得。组件具备value属性就是组件自身的value值。自定义组件具备以上2点属性就可以和rc-form配合使用了。如果你们有更好的form能力可以推荐下。

6.组件效果：