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

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

由于您将 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>
);
};