Checkbox 复选框

规则

• 一般出现在左侧。

代码演示

列表项复选框

import { List, Checkbox } from 'antd-mobile';
import { createForm } from 'rc-form';
const CheckboxItem = Checkbox.CheckboxItem;
let CheckboxItemExample = React.createClass({
  onClick() {
    console.log(this.props.form.getFieldsValue());
  },
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <List title="多项选择操作">
          <List.Body>
            <CheckboxItem
              {...getFieldProps('checkboxitem1', {
                initialValue: true,
                valuePropName: 'checked',
              })}
            >
              使用Ant Design Component
            </CheckboxItem>
            <CheckboxItem
              {...getFieldProps('checkboxitem2', {
                initialValue: false,
                valuePropName: 'checked',
              })}
            >
              个性化调整
            </CheckboxItem>
            <CheckboxItem
              disabled
              {...getFieldProps('checkboxitem3', {
                initialValue: true,
                valuePropName: 'checked',
              })}
            >
              个性化调整
            </CheckboxItem>
          </List.Body>
        </List>
      </div>
    );
  },
});
CheckboxItemExample = createForm()(CheckboxItemExample);
ReactDOM.render(<CheckboxItemExample />, mountNode);

协议复选框

import { Checkbox } from 'antd-mobile';
import { createForm } from 'rc-form';
const AgreeItem = Checkbox.AgreeItem;
let AgreeItemExample = React.createClass({
  onClick() {
    console.log(this.props.form.getFieldsValue());
  },
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <AgreeItem
        {...getFieldProps('agreeitem1', {
          initialValue: false,
          valuePropName: 'checked',
        })}
      >
        已阅读协议<a onClick={(e) => { e.preventDefault(); alert('打开协议'); }}>《协议链接》</a>
      </AgreeItem>
    );
  },
});
AgreeItemExample = createForm()(AgreeItemExample);
ReactDOM.render(<AgreeItemExample />, mountNode);

API

Checkbox

Checkbox.CheckboxItem

Checkbox.AgreeItem