Radio 单按钮

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

单选框

何时使用

单选按钮允许用户从一个数据集中选择单个选项。如果你觉得用户需要并排看到所有的可选项，使用单选按钮进行排他操作。此外，考虑使用下拉列表，相对于显示所有的选项占用更少的空间。

API

单按钮

Radio.Group

代码示例

基本

使用 Radio 渲染的基本组件。

查看源码在线预览

import { Radio } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h6>Without Label</h6>
    <Radio defaultChecked />&nbsp;
    <Radio checked />&nbsp;
    <Radio disabled />&nbsp;
    <Radio checked disabled />&nbsp;
    <Radio />
    <br />
    <h6>With Label</h6>
    <Radio id="apple">苹果</Radio>
    <Radio id="banana" />
    <label htmlFor="banana" className="next-radio-label">
      香蕉
    </label>
    <label>
      <Radio id="pear" />
      <span className="next-radio-label">雪梨</span>
    </label>
  </div>,
  mountNode
);

按钮样式组件

使用 RadioGroup 渲染的组，通过设置 shape="button" 可以让组件以按钮形式展示，同时可以通过 size 来控制组件大小。

查看源码在线预览

import { Radio } from "@icedesign/base";
const { Group: RadioGroup } = Radio;
const list = [
  {
    value: "apple",
    label: "苹果",
    disabled: false
  },
  {
    value: "pear",
    label: "梨子"
  },
  {
    value: "orange",
    label: "橙子",
    disabled: true
  }
];
class ControlApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: "apple",
      value2: ""
    };
    this.onNestChange = this.onNestChange.bind(this);
    this.onNormalChange = this.onNormalChange.bind(this);
  }
  onNormalChange(value) {
    this.setState({
      value1: value
    });
  }
  onNestChange(value) {
    this.setState({
      value2: value
    });
  }
  render() {
    return (
      <div>
        <h4>size 为 medium的正常状态</h4>
        <RadioGroup
          dataSource={list}
          shape="button"
          size="medium"
          value={this.state.value1}
          onChange={this.onNormalChange}
        />
        <br />
        <br />
        <h4>size 为large 的状态</h4>
        <RadioGroup
          shape="button"
          size="large"
          value={this.state.value2}
          onChange={this.onNestChange}
        >
          <Radio id="banana" value="banana">
            香蕉
          </Radio>
          <Radio id="watermelon" value="watermelon">
            西瓜
          </Radio>
          <Radio id="peach" value="peach">
            桃子
          </Radio>
        </RadioGroup>
        <br />
        <br />
        <h4>disabled 和选中后disabled的样子</h4>
        <RadioGroup
          shape="button"
          size="medium"
          value="banana"
          onChange={this.onNestChange}
        >
          <Radio id="peach" disabled value="peach">
            桃子
          </Radio>
          <Radio id="banana" disabled value="banana">
            香蕉
          </Radio>
        </RadioGroup>
      </div>
    );
  }
}
ReactDOM.render(<ControlApp />, mountNode);

受限组件

使用 RadioGroup 渲染的组，通过设置 value 属性可以让组件变成受限组件。

查看源码在线预览

import { Radio } from "@icedesign/base";
const { Group: RadioGroup } = Radio;
const list = [
  {
    value: 0,
    label: "苹果"
  },
  {
    value: "pear",
    label: "梨"
  },
  {
    value: "orange",
    label: "橙子"
  }
];
class ControlApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "orange"
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(value) {
    this.setState({
      value: value
    });
  }
  render() {
    return (
      <div>
        normal:{" "}
        <RadioGroup
          dataSource={list}
          value={this.state.value}
          onChange={this.onChange}
        />
        <br />
        <br />
        <br />
        disabled:{" "}
        <RadioGroup
          disabled
          dataSource={list}
          value={this.state.value}
          onChange={this.onChange}
        />
      </div>
    );
  }
}
ReactDOM.render(<ControlApp />, mountNode);

嵌套组件

使用 RadioGroup，通过直接嵌套 Radio 组件来渲染的组。

查看源码在线预览

import { Radio } from "@icedesign/base";
const { Group: RadioGroup } = Radio;
class NestApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "orange"
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(value) {
    this.setState({
      value: value
    });
  }
  render() {
    return (
      <div>
        <RadioGroup value={this.state.value} onChange={this.onChange}>
          <Radio id="apple" value="apple">
            苹果
          </Radio>
          <Radio id="watermelon" value="watermelon">
            西瓜
          </Radio>
          <Radio id="orange" value="orange">
            橙子
          </Radio>
        </RadioGroup>
      </div>
    );
  }
}
ReactDOM.render(<NestApp />, mountNode);

非受限组件

使用 RadioGroup 渲染的组，通过设置 defaultValue 属性可以让组件变成非受限组件。

查看源码在线预览

import { Radio } from "@icedesign/base";
const { Group: RadioGroup } = Radio;
const list = [
  {
    value: "apple",
    label: "苹果",
    disabled: false
  },
  {
    value: "pear",
    label: "梨",
    disabled: true
  },
  {
    value: "orange",
    label: "橙子"
  }
];
const UnControlApp = () => {
  return (
    <div>
      <RadioGroup dataSource={list} defaultValue={"apple"} />
    </div>
  );
};
ReactDOM.render(<UnControlApp />, mountNode);

相关区块

暂无相关区块