您的位置:58脚本 > elementui单选框radio选中 Element-React Radio 单选框

elementui单选框radio选中 Element-React Radio 单选框

2023-04-30 12:32

elementui单选框radio选中 Element-React Radio 单选框

elementui单选框radio选中 Element-React Radio 单选框

elementui单选框radio选中

在一组备选项中进行单选

基础用法

由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。

要使用 Radio 组件,需要设置value绑定变量,可以通过checked来指定Radio的选中状态。

constructor(props) {
  super(props);


  this.state = {
    value: 1
  }
}


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


render() {
  return (
    <div>
      <Radio value="1" checked={this.state.value === 1} onChange={this.onChange.bind(this)}>备选项</Radio>
      <Radio value="2" checked={this.state.value === 2} onChange={this.onChange.bind(this)}>备选项</Radio>
    </div>
  )
}

禁用状态

单选框不可用的状态。

注意:请牢记,选中的条件是绑定的变量值等于value中的值。只要在Radio元素中设置disabled属性即可,它接受一个Booleantrue为禁用。

render() {
  return (
    <div>
      <Radio value="1" disabled={true}>备选项</Radio>
      <Radio value="2" disabled={true}>备选项</Radio>
    </div>
  )
}

单选框组

适用于在多个互斥的选项中选择的场景

结合Radio.Group元素和子元素Radio可以实现单选组,在Radio.Group中绑定value,在Radio中设置好value即可,无需再给每一个Radio绑定变量,另外,还提供了onChange事件来响应变化,它会传入一个参数value

constructor(props) {
  super(props);


  this.state = {
    value: 3
  }
}


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


render() {
  return (
    <Radio.Group value={this.state.value} onChange={this.onChange.bind(this)}>
      <Radio value="3">备选项</Radio>
      <Radio value="6">备选项</Radio>
      <Radio value="9">备选项</Radio>
    </Radio.Group>
  )
}

按钮样式

按钮样式的单选组合。

只需要把Radio元素换成Radio.Button元素即可,此外,Element 还提供了size属性给按钮组,支持largesmall两种(如果不设定为默认)。

constructor(props) {
  super(props);


  this.state = {
    radio3: "上海",
    radio4: "上海",
    radio5: "上海"
  }
}


onChange(key, value) {
  this.setState({
    [key]: value
  });
}


render() {
  return (
    <div>
      <Radio.Group value={this.state.radio3} onChange={this.onChange.bind(this, "radio3")}>
        <Radio.Button value="上海" />
        <Radio.Button value="北京" />
        <Radio.Button value="广州" />
        <Radio.Button value="深圳" />
      </Radio.Group>
      <Radio.Group value={this.state.radio4} onChange={this.onChange.bind(this, "radio4")}>
        <Radio.Button value="上海" />
        <Radio.Button value="北京" />
        <Radio.Button value="广州" disabled={true} />
        <Radio.Button value="深圳" />
      </Radio.Group>
      <Radio.Group value={this.state.radio5} disabled={true}>
        <Radio.Button value="上海" />
        <Radio.Button value="北京" />
        <Radio.Button value="广州" />
        <Radio.Button value="深圳" />
      </Radio.Group>
    </div>
  )
}

Radio Attributes

参数 说明 类型 可选值 默认值
checked Radio是否被选中 boolean false
value Radio 的 value string,number,boolean
disabled 是否禁用 boolean false
name 原生 name 属性 string

Radio-group Attributes

参数 说明 类型 可选值 默认值
size Radio 按钮组尺寸 string large, small
fill 按钮激活时的填充色和边框色 string #20a0ff
textColor 按钮激活时的文本颜色 string #ffffff

Radio-group Events

事件名称 说明 回调参数
onChange 绑定值变化时触发的事件 选中的 Radio label 值

Radio-button Attributes

参数 说明 类型 可选值 默认值
value Radio 的 value string,number
disabled 是否禁用 boolean false
阅读全文
以上是58脚本为你收集整理的elementui单选框radio选中 Element-React Radio 单选框全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS