Question

我试图在React.js中做两个“ radio-div”。 “ radio-div”是一个div，如果选中它，将更改其背景颜色。有人可以帮我吗？

The final result must be like this

谢谢大家

Answer 1

如果您要使用自定义单选按钮，则可以通过使用display: none隐藏单选按钮并使用 css相邻选择器定位div来实现。

查看我在网上找到的以下示例： https://codepen.io/AngelaVelasquez/pen/Eypnq

寻找input[type=radio]:checked ~ label

更多信息：https://css-tricks.com/child-and-sibling-selectors/

Answer 2

这里是stackblitz的示例。想法是在选定的广播div上添加活动班级。

constructor() {
    this.state = {
        activeIndex: ''
    };

    this.radioButtons = [
        {
            text: 'India'
        },
        {
            text: 'England'
        }
    ]
}

updateRadioGroup(i) {
    this.setState({ activeIndex: i })
}

render() {
    let { activeIndex } = this.state;
    return (
        <React.Fragment>
            <h4> Who will win the match </h4>
            {
                this.radioButtons.map((element, i) => (
                    <div key={i} className={activeIndex === i ? 'radio_div active' : 'radio_div'} onClick={() => this.updateRadioGroup(i)}>
                        {element.text}
                    </div>
                ))
            }
        </React.Fragment>
    );
}

在我的示例中，我在状态中添加了单选选项meta。使用初始无线电activeIndex''empty渲染html（默认情况下未选择任何无线电）。现在，每当用户单击任何一个div时，我都会使用单击的radioDiv索引更新activeIndex，并有条件地将活动类附加到相应的radioDiv上。

谢谢，让我知道您是否想实现这种情况。

在React.js中如何使用div作为单选按钮选项

2 个答案: