Radio 单选框

单选框

代码演示

基本

  1. import { List, Radio, Flex, WhiteSpace } from 'antd-mobile';
  2. const RadioItem = Radio.RadioItem;
  3. class Test extends React.Component {
  4. state = {
  5. value: 0,
  6. value2: 0,
  7. value3: 0,
  8. value4: 0,
  9. };
  10. onChange = (value) => {
  11. console.log('checkbox');
  12. this.setState({
  13. value,
  14. });
  15. };
  16. onChange2 = (value) => {
  17. console.log('checkbox');
  18. this.setState({
  19. value2: value,
  20. });
  21. };
  22. render() {
  23. const { value, value2, value3, value4 } = this.state;
  24. const data = [
  25. { value: 0, label: 'doctor' },
  26. { value: 1, label: 'bachelor' },
  27. ];
  28. const data2 = [
  29. { value: 0, label: 'basketball', extra: 'details' },
  30. { value: 1, label: 'football', extra: 'details' },
  31. ];
  32. return (<div>
  33. <List renderHeader={() => 'RadioItem demo'}>
  34. {data.map(i => (
  35. <RadioItem key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}>
  36. {i.label}
  37. </RadioItem>
  38. ))}
  39. </List>
  40. <WhiteSpace size="lg" />
  41. <List>
  42. {data2.map(i => (
  43. <RadioItem key={i.value} checked={value2 === i.value} onChange={() => this.onChange2(i.value)}>
  44. {i.label}<List.Item.Brief>{i.extra}</List.Item.Brief>
  45. </RadioItem>
  46. ))}
  47. </List>
  48. <List renderHeader={() => 'Disabled'}>
  49. {data.map(i => (
  50. <RadioItem key={i.value} checked={value3 === i.value} onChange={() => this.onChange3(i.value)} disabled>
  51. {i.label}
  52. </RadioItem>
  53. ))}
  54. </List>
  55. <WhiteSpace size="lg" />
  56. <List>
  57. {data2.map(i => (
  58. <RadioItem key={i.value} checked={value4 === i.value} onChange={() => this.onChange4(i.value)} disabled>
  59. {i.label}<List.Item.Brief>{i.extra}</List.Item.Brief>
  60. </RadioItem>
  61. ))}
  62. </List>
  63. <Flex style={{ padding: '15px' }}>
  64. <Flex.Item style={{ padding: '15px 0', color: '#888', flex: 'none' }}>Radio demo(dustomized style)</Flex.Item>
  65. <Flex.Item>
  66. <Radio className="my-radio" onChange={e => console.log('checkbox', e)}>Agree</Radio>
  67. </Flex.Item>
  68. </Flex>
  69. </div>);
  70. }
  71. }
  72. ReactDOM.render(<Test />, mountNode);
  1. .my-radio .am-radio {
  2. padding: 2.5px;
  3. border: 1px solid #ccc;
  4. border-radius: 50%;
  5. margin-right: 5px;
  6. }

Radio单选框 - 图1

API

Radio

属性说明类型默认值
namenameString
defaultChecked初始是否选中Boolean
checked指定当前是否选中Boolean
disabled禁用Booleanfalse
onChangechange 事件触发的回调函数(e: Object): void

Radio.RadioItem

基于List.ItemRadio进行封装,List.Itemextra属性固定传入Radio,其他属性和List.Item一致。其他 API 和 Radio 相同。