Radio 单选框

单选框表单控件。

何时使用

  • 用于在多个备选项中选中单个状态。
  • 和 Select 的区别是,Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。

代码演示

基本使用

请确保Radio具有相同的name属性以实现单选功能。

Radio单选框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Radio } from 'choerodon-ui/pro';
  4. function handleChange(value) {
  5. console.log('[basic]', value);
  6. }
  7. ReactDOM.render(
  8. <div>
  9. <Radio name="base" value="A" onChange={handleChange} defaultChecked>A</Radio>
  10. <Radio name="base" value="B" onChange={handleChange}>B</Radio>
  11. <Radio name="base" value="C" onChange={handleChange}>C</Radio>
  12. </div>,
  13. document.getElementById('container')
  14. );

受控单选框

受控单选框

Radio单选框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Radio } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. value: 'A',
  9. };
  10. }
  11. handleChange = (value) => {
  12. console.log('[controlled]', value, '[oldValue]', this.state.value);
  13. this.setState({
  14. value,
  15. });
  16. }
  17. render() {
  18. const { value } = this.state;
  19. return (
  20. <div>
  21. <Radio name="controlled" value="A" checked={value === 'A'} onChange={this.handleChange}>A</Radio>
  22. <Radio name="controlled" value="B" checked={value === 'B'} onChange={this.handleChange}>B</Radio>
  23. <Radio name="controlled" value="C" checked={value === 'C'} onChange={this.handleChange}>C</Radio>
  24. </div>
  25. );

绑定数据源

绑定数据源

Radio单选框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Radio } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ value, oldValue }) {
  5. console.log('[dataset newValue]', value, '[oldValue]', oldValue);
  6. }
  7. const data = [{ bind: 'A' }];
  8. class App extends React.Component {
  9. ds = new DataSet({
  10. data,
  11. fields: [
  12. { name: 'bind' },
  13. ],
  14. events: {
  15. update: handleDataSetChange,
  16. },
  17. });
  18. render() {
  19. return (
  20. <div>
  21. <Radio dataSet={this.ds} name="bind" value="A">A</Radio>
  22. <Radio dataSet={this.ds} name="bind" value="B">B</Radio>
  23. <Radio dataSet={this.ds} name="bind" value="C">C</Radio>
  24. </div>

只读

只读。

Radio单选框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Radio, DataSet } from 'choerodon-ui/pro';
  4. const data = [{ rd: 'C' }];
  5. class App extends React.Component {
  6. ds = new DataSet({
  7. data,
  8. fields: [
  9. { name: 'rd', readOnly: true },
  10. ],
  11. });
  12. render() {
  13. return (
  14. <div>
  15. <Radio name="rd" disabled>A</Radio>
  16. <Radio name="rd" readOnly>B</Radio>
  17. <Radio dataSet={this.ds} name="rd" value="C">C</Radio>
  18. </div>
  19. );
  20. }
  21. }
  22. ReactDOM.render(
  23. <App />,
  24. document.getElementById('container')

按钮显示效果

显示成按钮。

Radio单选框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Radio } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[button]', value, '[oldValue]', oldValue);
  6. }
  7. ReactDOM.render(
  8. <div>
  9. <Radio mode="button" name="base" value="A" onChange={handleChange} defaultChecked>A</Radio>
  10. <Radio mode="button" name="base" value="B" onChange={handleChange}>B</Radio>
  11. <Radio mode="button" name="base" value="C" onChange={handleChange}>C</Radio>
  12. </div>,
  13. document.getElementById('container')
  14. );

API

参数说明类型默认值
checked<受控>是否选中boolean
defaultChecked初始是否选中booleanfalse
mode显示模式,可选值:box | buttonstringbox

更多属性请参考 Field