Shinemo-radio NPM

单选框 / Radio

Radio.RadioGroup使用

参数	类型	备注
value	String	默认选中的值，与`Radio`的value比较，如果一致则选中该单选框
name	String	`Radio`的name值，不传会随机生成一串字符串作为`name`值
onChange	Function	选中某个`Radio`的回调，返回选中的`Radio`的`value`

Radio使用

参数	类型	备注
value	String	单选框的值
name	String	name值，用来关联同组radio
onChange	Function	选中某个`Radio`的回调，返回`value`
disabled	Boolean	不可点状态
cls	String	自定义class名称
checkedCls	String	自定义选中时的class名称
checked	Boolean	默认选中, 如果同一组内有多个`checked`，与原生的保持一致，只有最后一个`checked`才会选中

import React from 'react'
import ReactDOM from 'react-dom'
import Radio from '@xm/Radio'
import styles from './index.scss'

const onChange = (value) => {
  console.log(value)
}

const style = {
  display: 'block',
  marginTop: '10px'
}

ReactDOM.render((<div>
  <Radio.RadioGroup onChange={onChange} value={1}>
    <Radio value={1} style={style} disabled>Disabled Radio1</Radio>
    <Radio value={2} style={style}>Radio2</Radio>
    <Radio value={3} style={style}>Radio3</Radio>
    <Radio value={4} style={style}>Radio4</Radio>
  </Radio.RadioGroup>
  <Radio.RadioGroup onChange={onChange} value={2} name="abc" cls={styles.radio}>
    <Radio value={1}>Radio1</Radio>
    <Radio value={2}>Radio2</Radio>
    <Radio value={3}>Radio3</Radio>
    <Radio value={4}>Radio4</Radio>
  </Radio.RadioGroup>

  <Radio.RadioGroup onChange={onChange} value={1} name="def" style={{marginTop: '10px'}}>
    <Radio.RadioButton value={1} disabled>Disabled Radio1</Radio.RadioButton>
    <Radio.RadioButton value={2}>Radio2</Radio.RadioButton>
    <Radio.RadioButton value={3} disabled>Disabled Radio3</Radio.RadioButton>
    <Radio.RadioButton value={4}>Radio4</Radio.RadioButton>
  </Radio.RadioGroup>
</div>), document.getElementById('app'))

classnames console-polyfill es3ify-webpack-plugin es5-shim export-from-ie8 normalize.css react react-dom

0.0.4

3 years ago