@uiw/react-radio
v4.22.3
Published
Radio component
Downloads
875
Readme
Radio 单选框
单选框,在一组备选项中进行单选。
import { Radio, RadioButton, RadioGroup } from 'uiw';
// or
import { Radio, RadioButton, RadioGroup } from '@uiw/react-radio';
基础用法
适用广泛的基础最简单的用法,展示各种状态下的样式。
import React from 'react';
import { Radio, RadioButton } from 'uiw';
export default function Demo() {
return (
<div>
<Radio value="1">Radio</Radio>
<Radio value="2" checked>选中</Radio>
<Radio value="3" disabled>禁用</Radio>
<Radio value="4" checked disabled>选中并禁用</Radio>
<Radio value="4" checked disabled>选中并禁用</Radio>
<RadioButton value="5" >RadioButton</RadioButton>
<RadioButton value="5" checked >RadioButton 选中</RadioButton>
</div>
);
}
Form 中使用 Radio
import React from 'react';
import { Form, Radio, RadioGroup, RadioButton, Row, Col, Button, Notify } from 'uiw';
export default function Demo() {
return (
<Form
onChange={({ initial, current }) => {}}
resetOnSubmit={false}
onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}
onSubmit={({initial, current}) => {
const ErrObj = {};
if (current.radioGroup === 'unknown') {
ErrObj.radioGroup = '请选择性别!';
}
if(Object.keys(ErrObj).length > 0) {
const err = new Error();
err.filed = ErrObj;
throw err;
}
Notify.success({
title: '提交成功!', description: `填写:【填写成功】!`
});
}}
fields={{
radioGroup: {
value: 'girl',
label: '请输入内容',
help: '必须选择性别!',
children: (
<RadioGroup>
<Radio value="man">男</Radio>
<Radio value="girl">女</Radio>
<Radio value="shemale">中性</Radio>
<Radio value="unknown">未知</Radio>
</RadioGroup>
),
},
radioButtonGroup: {
value: 'girl',
label: '请输入内容',
help: '必须选择性别!',
children: (
<RadioGroup>
<RadioButton value="man">男</RadioButton>
<RadioButton value="girl">女</RadioButton>
<RadioButton value="shemale">中性</RadioButton>
<RadioButton value="unknown">未知</RadioButton>
</RadioGroup>
),
},
radio: {
help: '请选择!该选项为必选!',
validator: (value) => !value ? '必填选项!' : null,
children: <Radio value="man">已阅读</Radio>,
},
}}
>
{({ fields, state, canSubmit }) => {
return (
<div>
<Row>
<Col>{fields.radioGroup}</Col>
</Row>
<Row>
<Col>{fields.radioButtonGroup}</Col>
</Row>
<Row>
<Col>{fields.radio}</Col>
</Row>
<Row>
<Col>
<Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
</Col>
</Row>
<Row>
<Col>
<pre style={{ padding: 10, marginTop: 10 }}>
{JSON.stringify(state.current, null, 2)}
</pre>
</Col>
</Row>
</div>
);
}}
</Form>
);
}
单选
适用广泛的基础最简单的用法。
import React from 'react';
import { Radio, RadioGroup, RadioButton } from 'uiw';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { value: '未知' };
}
onChange(value) {
this.setState({ value });
}
render() {
return (
<div>
<RadioGroup name="sexs" value={this.state.value} onChange={(e)=>this.onChange(e.target.value)}>
<Radio value="man">男</Radio>
<Radio value="girl">女</Radio>
<Radio value="shemale" disabled>中性</Radio>
<Radio value="unknown" disabled>未知</Radio>
</RadioGroup>
<RadioGroup name="sexs" value={this.state.value} onChange={this.onChange.bind(this)} style={{ marginTop: 20 }}>
<RadioButton value="man">男</RadioButton>
<RadioButton value="girl">女</RadioButton>
<RadioButton value="shemale" disabled>中性</RadioButton>
<RadioButton value="unknown" disabled>未知</RadioButton>
</RadioGroup>
</div>
)
}
}
export default Demo;
单选组
设置单选初始值
import React from 'react';
import { Radio, RadioGroup, RadioButton, Divider, Button } from 'uiw';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { value: '未知' };
}
onChange(value) {
this.setState({ value });
}
render() {
return (
<div>
<RadioGroup name="other" value={this.state.value} onChange={(e)=>this.onChange(e.target.value)}>
<div>Group 1</div>
<Radio value="男">男</Radio>
<Radio value="女">女</Radio>
<div>Group 2</div>
<Radio value="中性" disabled>中性</Radio>
<Radio value="未知">未知</Radio>
<div>Group 3</div>
<Radio value="E" style={{ display: 'block' }}>Item E</Radio>
<Radio value="F" style={{ display: 'block' }}>Item F</Radio>
<div>Group 3</div>
</RadioGroup>
<RadioGroup name="other" value={this.state.value} onChange={this.onChange.bind(this)} style={{ marginTop:20 }}>
<RadioButton value="男">男</RadioButton>
<RadioButton value="女">女</RadioButton>
<RadioButton value="未知">未知</RadioButton>
</RadioGroup>
<Divider />
<Button
type="primary"
onClick={() => {
// console.log('set::', ['东北菜', '北京烤鸭']);
this.setState({ value: '女' });
}}
>
点击按钮选"女"
</Button>
</div>
)
}
}
export default Demo;
Radio
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| value | 根据 value 进行比较,判断是否选中 | String/Number/Boolean | - |
| name | 用于表单对应的名称 | String | - |
| checked | Radio是否被选中 | Boolean | false
|
| disabled | 是否禁用 | Boolean | false
|
| onChange | 数值改变时的回调,返回当前值 | Funtcion(e:Even) | - |
RadioGroup
| 参数 | 说明 | 类型 | 默认值 | |--------- |-------- |--------- |-------- | | value | 根据 value 进行比较,判断是否选中 | String/Number/Boolean | - | | name | 用于表单对应的名称 | String | - | | onChange | 数值改变时的回调,返回当前值 | Funtcion(e:Even) | - |