Radio 单选框

定义／Definition

规则 / Rule

• 单选按钮一般出现在列表右侧，只有当列表右侧有内容时，才出现在列表左侧；

• 选择后可以直接触发某个行为。

代码演示

基本

import { Radio } from 'antd-mobile';
let Test = React.createClass({
  getInitialState() {
    return {
      disabled: false,
      value: 1,
    };
  },
  handleChange(e) {
    if (e.target.checked) {
      this.setState({
        value: 1,
      });
    }
  },
  handleChange2(e) {
    if (e.target.checked) {
      this.setState({
        value: 2,
      });
    }
  },
  render() {
    return (
      <div>
        <div style={{ position: 'relative', paddingTop: '5px' }}>
          <span style={{ borderWidth: '1px', borderColor: 'red', borderStyle: 'solid', margin: '10px 4px' }}>
            <Radio
              checked={this.state.value === 1}
              onChange={this.handleChange}
            />
          </span>
          <span style={{ borderWidth: '1px', borderColor: 'rgba(45, 183, 245, 0.7)', borderStyle: 'solid', margin: '10px 4px' }}>
            <Radio
              checked={this.state.value === 2}
              onChange={this.handleChange2}
            />
          </span>
        </div>
      </div>
    );
  },
});
ReactDOM.render(<Test />, mountNode);

列表单选框

import { List, Radio } from 'antd-mobile';
const RadioItem = Radio.RadioItem;
let Test = React.createClass({
  getInitialState() {
    return {
      disabled: false,
      value: 1,
    };
  },
  handleChange(e) {
    if (e.target.checked) {
      this.setState({
        value: 1,
      });
    }
  },
  handleChange2(e) {
    if (e.target.checked) {
      this.setState({
        value: 2,
      });
    }
  },
  render() {
    return (
      <div>
        <List >
          <List.Header>表单单选框，普通列表中单选</List.Header>
          <List.Body>
            <RadioItem
              checked={this.state.value === 1}
              onChange={this.handleChange}
              disabled={this.state.disabled}
            >
              使用 Ant Desgin Component
            </RadioItem>
            <RadioItem
              checked={this.state.value === 2}
              onChange={this.handleChange2}
              disabled={this.state.disabled}
            >
              使用 Ant Desgin Component
            </RadioItem>
            <RadioItem
              checked
              onChange={this.handleChange}
              disabled
            >
              个性化调整disabled
            </RadioItem>
            <RadioItem
              checked={false}
              onChange={this.handleChange}
              disabled
            >
              个性化调整disabled
            </RadioItem>
          </List.Body>
        </List>
      </div>
    );
  },
});
ReactDOM.render(<Test />, mountNode);

API

Radio

Radio.RadioItem