欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react实现Radio组件的示例代码

程序员文章站 2022-03-08 15:26:09
本文旨在用最清楚的结构去实现一些组件的基本功能。希望和大家一起学习,共同进步效果展示:测试组件:class test extends component { constructor(props) {...

本文旨在用最清楚的结构去实现一些组件的基本功能。希望和大家一起学习,共同进步

效果展示:

react实现Radio组件的示例代码

测试组件:

class test extends component {
  constructor(props) {
    super(props)
    this.state = {
      active:1
    }
  }
  ongroupchange(value) {
    this.setstate({
      active: value
    })
  }
  render() {
    return (
     <div>
      <radiogroup onchange={this.ongroupchange.bind(this)} active={this.state.active}>
         <radio value={1}>使用余额支付</radio>
         <radio value={2}>使用微信支付</radio>
      </radiogroup>
      <button onclick={()=>{
             console.log("此时选中的是:"+this.state.active)
           }}>下一步</button>
     </div>
      )
  }
}
export default test;

radiogroup:

import react, { component } from 'react';
class radiogroup extends component {
  handleactivechange(value) {
    console.log(`${value}被选中了`)
    this.props.onchange(value)
  }
  render() {
    return (
      <div>
        {
          react.children.map(this.props.children, child => {
            let isactive = this.props.active === child.props.value ? true : false
            return react.cloneelement(child, {
              label: child.props.children,
              value: child.props.value,
              active: isactive,
              onclick: this.handleactivechange.bind(this)
            })
          })
        }
      </div>
    )
  }
}
export default radiogroup;

radio.jsx:

import react, { component } from 'react';
import "./radio.scss"
class radio extends component {
  render() {
    return (
      <div classname="radio-wrap" onclick={this.props.onclick.bind(this,this.props.value)}>
        <div classname="left">
          <div classname={`circle ${this.props.active === true ? 'active' : ''} `}>
            <div classname="fork"></div>
          </div>
          <div classname="label">{this.props.label}</div>
        </div>
      </div>
    )
  }
}
export default radio;

radio.scss:

.radio-wrap {
  height: 40px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0px 30px;

  &:active {
    background-color: rgb(221, 221, 221);
  }

  .left {
    display: inline-block;

    .circle {
      display: inline-block;
      height: 22px;
      width: 22px;
      box-sizing: border-box;
      border: 1px solid #c5c9cd;
      border-radius: 50%;
      background-color: #ffffff;
      position: relative;

      
    }
    .active{
      background-color: #1eb94a;
      .fork {
        height: 12px;
        width: 5px;
        border-right: 1.5px solid #ffffff;
        border-bottom: 1.5px solid #ffffff;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
      }
    }

    .label {
      vertical-align: top;
      margin-left: 10px;
      display: inline-block;
      height: 22px;
      line-height: 22px;
      font-size: 14px;
    }
  }
}

到此这篇关于react实现radio组件的示例代码的文章就介绍到这了,更多相关react实现radio组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

相关标签: react Radio组件