# Radio2 单选框

## 使用场景

  多选一时使用, 注意与 Radio 区别

## 案例演示

### Radio 基本使用

---demo
```js
import { Radio2 } from 'amos-framework';

function onChange(e){
  console.log(e);
}

ReactDOM.render((
  <div>
    <Radio2 value="prop1" onChange={onChange}>属性</Radio2>
    <Radio2 defaultChecked={false} disabled>Disabled</Radio2>
    <Radio2 defaultChecked disabled>Disabled</Radio2>
  </div>
), _react_runner_);
```
---demoend

### Radio2 Group 基本使用

---demo
```js
import { Radio2 } from 'amos-framework';

const RadioGroup = Radio2.Group;

ReactDOM.render(
  <RadioGroup defaultValue="prop2" onChange={value => console.log(value)}>
    <Radio2 value="prop1">属性1</Radio2>
    <Radio2 value="prop2">属性2</Radio2>
    <Radio2 value="prop3" disabled>属性3</Radio2>
  </RadioGroup>, _react_runner_);
```
---demoend

### Radio2 Group 可控使用

---demo
```js
import { Radio2 } from 'amos-framework';

const RadioGroup = Radio2.Group;

class CtlDemo extends Component {
  state = {
    value: 'prop2'
  };

  onChange = (value) => {
    this.setState({
      value
    });
  }

  render() {
    const { value } = this.state;
    return (
      <RadioGroup value={value} onChange={this.onChange}>
        <Radio2 value="prop1">属性1</Radio2>
        <Radio2 value="prop2">属性2</Radio2>
        <Radio2 value="prop3" disabled>属性3</Radio2>
      </RadioGroup>
    );
  }
}

ReactDOM.render(<CtlDemo />, _react_runner_);
```
---demoend

### Radio2 Group 使用 options

---demo
```js
import { Radio2 } from 'amos-framework';

const RadioGroup = Radio2.Group;

const opts = ['prop1', 'prop2', 'prop3'];
const opts2 = [
  { label: '属性1', value: 'prop1' },
  { label: '属性2', value: 'prop2' },
  { label: '属性3', value: 'prop3', disabled: true }
];

ReactDOM.render((
  <div>
    <RadioGroup defaultValue="prop2" options={opts} onChange={value => console.log(value)} />
    <br />
    <RadioGroup defaultValue="prop2" options={opts2} onChange={value => console.log(value)} />
  </div>
), _react_runner_);
```
---demoend

### Radio2 Button 基本使用

---demo
```js
import { Radio2 } from 'amos-framework';

const RadioGroup = Radio2.Group;
const RadioButton = Radio2.Button;

ReactDOM.render(
  <RadioGroup defaultValue="prop2" onChange={value => console.log(value)}>
    <RadioButton value="prop1">属性1</RadioButton>
    <RadioButton value="prop2">属性2</RadioButton>
    <RadioButton value="prop3" disabled>属性3</RadioButton>
  </RadioGroup>, _react_runner_);
```
---demoend


### Radio2 嵌套其它组件

> 注意，Radio2 组件的children支持任何组件，如果出现事件冲突，如将 `Select` 组件作为子组件时，将会响应两次 Select 的点击事件，
> 此时，只需要将 Radio2 和 Select 进行平级处理即可。

---demo
```js
import { Radio2, Select, Input } from 'amos-framework';

const RadioGroup = Radio2.Group;
const Option = Select.Option;

const data = [
  { id: '0', name: '张三' },
  { id: '1', name: '李四' },
  { id: '2', name: '王五' }
];

class Demo extends Component {
  state = {
  	value: 'prop1'
  };

  onChange = (value) => {
    this.setState({
      value
    });
  }

  iptChange = (e) => {
  	this.setState({
    	value: e.target.value
    });
  }

	render(){
    const { value } = this.state;
    return (
      <div>
        <RadioGroup value={value} onChange={this.onChange}>
          <Radio2 value="prop1"><Input disabled={value !== 'prop1'} /></Radio2>
          <span>
            <Radio2 value="prop2" />
            <Select
              data={data}
              renderOption={item => <Option value={item.id}>{item.name}</Option>}
              disabled={value !== 'prop2'}
            />
          </span>
        </RadioGroup>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend


### 使用 vertical 方式

---demo
```js
import { Radio2, Icon } from 'amos-framework';

const RadioGroup = Radio2.Group;

function onChange(e){
  console.log(e);
}

const Demo0 = () => (
  <div>
    <Radio2 vertical value="prop1" onChange={onChange}>属性</Radio2>
    <Radio2 vertical defaultChecked={false} disabled>Disabled</Radio2>
    <Radio2 vertical defaultChecked disabled>Disabled</Radio2>
  </div>
);

const Demo1 = () => (
  <RadioGroup defaultValue="prop2" onChange={onChange}>
    <Radio2 vertical value="prop1">属性1</Radio2>
    <Radio2 vertical value="prop2">属性2</Radio2>
    <Radio2 vertical value="prop3" disabled>属性3</Radio2>
  </RadioGroup>
);

const opts = ['prop1', 'prop2', 'prop3'];

const Demo2 = () => (
<RadioGroup vertical defaultValue="prop2" options={opts} onChange={onChange} />
);

ReactDOM.render((
  <div style={{ width: 300 }}>
    基本：<Demo0 />
    <p />
    RadioGroup：<Demo1 />
    <p />
    RadioGroup opts：<Demo2 />
  </div>
), _react_runner_);
```
---demoend

## props

### Radio2

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-radio` | css class 前缀 |
| children |  | `` | 内容 |
| className | string | - | 外层label样式名 |
| value | `string or number` | - | 值，如果结合 Radio2.Group 使用，与其 value 或 defaultValue 对应 |
| checked | boolean | - | 单独使用时，是否选中，与 Radio2.Group 一起使用时无需指定 |
| defaultChecked | boolean | - | 单独使用时，初始是否选中（不可控），与 Radio2.Group 一起使用时无需指定 |
| onChange | function | - | 单独使用时，切换选中后的回调，参数为 event 对象，与 Radio2.Group 一起使用时无需指定 |
| disabled | boolean | - | 是否禁用 |
| vertical | boolean | - | 是否块级布局 |

### Radio2.Group

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-radio-group` | css class 前缀 |
| className | string | - | 外层div样式名 |
| children |  | - | 内容，支持任意类型 |
| value | `string or number` | - | 选中的值 |
| size | string | `default` | 大小，只对按钮样式生效, 可选值 `lg, sm` |
| defaultValue | `string or number` | - | 初始化时选中的值（不可控） |
| onChange | `func: (value, evt) => {}` | - | 切换选择后的回调。参数为选中的值 |
| options | `String[] or Array<{label: string, value: string, disabled?: boolean}>` | - | 以配置形式设置子元素 |
| vertical | boolean | - | 是否块级布局,统一设置。仅会给 options 模式统一添加 vertical |