使用React JS创建一个自定义单选按钮

小编典典

使用React JS创建一个自定义单选按钮

reactjs

我正在尝试创建一个自定义单选按钮。我面临的问题是，单击另一个单选按钮后，我无法取消选中该单选按钮。当前，它的行为就像一个复选框。

import {React, ReactDOM} from '../../shared/lib/react';

export default class RadioButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          checkedRadioBtn: false
        };
        this.toggleRadioBtn = this.toggleRadioBtn.bind(this);
     };


    toggleRadioBtn(){
        this.setState({checkedRadioBtn: !this.state.checkedRadioBtn});
    };

    render() {
        return (
            <div className="radio-btn-group">
                <div onClick={this.toggleRadioBtn} className={this.state.checkedRadioBtn ? "radiobtn checked" : "radiobtn unchecked"} data-value={this.props.value}></div>
                <label>{this.props.text}</label>
            </div>
        );
    }
};

阅读 356

2020-07-22

共1个答案

小编典典

您需要具有用于单选按钮组的容器。该容器将保持所有单选按钮的状态，并处理每个选项的选中/取消选中状态。这是示例代码，

import React from 'react'
import ReactDOM from 'react-dom'

class RadioBtn extends React.Component{

    constructor(props) {
        super(props);
    }

    handleClick(){
        this.props.handler(this.props.index);
    }

    render() {
        return (
            <div className="radio-btn-group" onClick={this.handleClick.bind(this)}>
                <div className={this.props.isChecked ? "radiobtn checked" : "radiobtn unchecked"} data-value={this.props.value}></div>
                <label>{this.props.text}</label>
            </div>
        );
    }
}

class RadioGrp extends React.Component{

    constructor() {
        super();
        this.state = {
          selectedIndex: null,
          selectedValue: null,
          options: ["option 0","option 1","option 2","option 3"]
        };
    }

    toggleRadioBtn(index){
        this.setState({
          selectedIndex: index,
          selectedValue: this.state.options[index],
          options: this.state.options
        });
    }

    render() {

        const { options } = this.state;

        const allOptions = options.map((option, i) => {
            return <RadioBtn key={i} isChecked={(this.state.selectedIndex == i)} text={option} value={option} index={i} handler={this.toggleRadioBtn.bind(this)} />
        });

        return (
            <div>{allOptions}</div>
        );
    }
}

var app = document.getElementById('app');

ReactDOM.render(<RadioGrp />, app);

2020-07-22