我正在尝试创建一个自定义单选按钮。我面临的问题是,单击另一个单选按钮后,我无法取消选中该单选按钮。当前,它的行为就像一个复选框。
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> ); } };
您需要具有用于单选按钮组的容器。该容器将保持所有单选按钮的状态,并处理每个选项的选中/取消选中状态。这是示例代码,
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);