Question

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

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>
        );
    }
};

Answer 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);

Answer 2

由于您使用div作为自定义复选框，其行为不像普通复选框，因此您应该根据所选值检查值。

toggleRadioBtn(e){
    this.setState({checkedRadioBtn: e.target.value});
};

我的另一个问题是你在这里假设一个复选框，所以我必须假设你有一个返回多个实例的调用组件。如果是这种情况，那么您需要传递onClick，这样您就可以将值传递回父级。然后将选定的值传回。

这是我在我的申请中的一个例子。

var languges = this.props.languages;
    var languageToSelect = this.state.selectedLanguage;
    var handleChange = this.handleChange;
    var languageRows = Object.keys(languges).map(function(key) {
        var language = languges[key];
        return <LanguageBlock
                    key={ key }
                    language={ language }
                    languageCode={ key }
                    checked={ languageToSelect === key }
                    handleChange={ handleChange }
                />;
    });

在我的用例中，我有多种语言和onChange我将所选语言备份，然后在重新呈现时，所选语言将被更新，因此无线电选项将反映更改。

handleChange: function handleChange(event) {
    this.setState({ selectedLanguage: event.target.value });
},

句柄更改只是为新值设置状态。语言块本身只是一个简单的组件，因此无需使其成为类/组件。

const LanguageBlock = ({ checked, language, languageCode, handleChange }) => {
return (
    <div className="truncification">
        <input type="radio" name="lang" id={ 'lang_' + languageCode }
            value={ languageCode } checked={ checked } onChange={ (evt) => { handleChange(evt); } } />
        <label htmlFor={ 'lang_' + languageCode }>{ language }</label>
    </div>
);
};

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

2 个答案: