在 React 中创建单选按钮答案

【问题标题】：Create radio buttons in React在 React 中创建单选按钮
【发布时间】：2020-09-13 10:48:16
【问题描述】：

所以我有这 4 个 div：

如何将这些普通的 div 更改为像单选按钮一样？当我按下其中一个按钮时，我想像一个单选按钮一样做一些事情，比如改变边框的颜色。

代码如下：

<div className="rcorners2 blue-border"><img src = {clinic} alt="Heart Logo" className="logo"/>
      <div className="div1-number">
        <b>4</b>
      </div>
      <div className="div1-string">
        All Studies
      </div>
      </div>
      <div className="rcorners2" ><img src = {medkit} alt="Heart Logo" className="logo"/>
      <div className="div2-number">
      <b>4</b>
      </div>
      <div  className="div2-string">
        Active Studies
      </div>
      </div>
      <div className="rcorners2"><img src = {alert} alt="Heart Logo" className="logo">
        </img>
        <div className="div3-number">
        <b>4</b>
        </div>
        <div  className="div3-string">
          Urgent
        </div>
        </div>
      <div className="rcorners2" ><img src = {watch} alt="Heart Logo" className="logo">
        </img>
        <div className="div4-number">
        <b>4</b>
        </div>
        <div  className="div4-string">
          Behind Schedule
        </div>
        </div>

【问题讨论】：

这是css代码：.rcorners2 {border-radius:25px;背景颜色：白色；填充：20px；最高保证金：5%；显示：内联块；左边距：2%；宽度：320px；高度：90px；盒子阴影：0px 3px 6px rgba(0,0,0,0.161); } .logo { 浮动：左；宽度：20%；高度：100%；边界半径：20%； }
像
一样将 onClick 添加到 div
@SulungNugroho 我理解好主意，但如果我设置 onClick 所有 div 并一次按下所有 div，它们将全部变为蓝色。我想要的是一次一个例如，如果我按下第一个然后第二个，第二个将被着色，第一个将被关闭
你可以用户参考。或在每个 div 上设置不同的值，例如 onClick={ () => this.handleOnClick(1))。然后你可以过滤方法handleOnClick = (val) => { if(val === 1) { do something.....} }

import React, { Component } from "react"; export default class SampleClass extends Component { constructor(props) { super(props) this.elementDiv1 = React.createRef(); this.elementDiv2 = React.createRef(); this.elementDiv3 = React.createRef(); } handleOnClick = (val) => { if(val === 1) { let elmDiv1 = this.elementDiv1.current; elmDiv1.classList.toggle("text-danger"); // suppose using bootstrap }else if(val === 2) { let elmDiv2 = this.elementDiv2.current; elmDiv2.classList.toggle("text-primary"); }else if(val === 3) { let elmDiv3 = this.elementDiv3.current; elmDiv3.classList.toggle("text-warning"); } } render() { return ( <div> <div className="div1-string" ref={this.elementDiv1} onClick={()=>this.handleOnClick(1)}> All Studies </div> <div className="div2-string" ref={this.elementDiv2} onClick={()=>this.handleOnClick(2)}> Active Studies </div> <div className="div3-string" ref={this.elementDiv3} onClick={()=>this.handleOnClick(3)}> Urgent </div> </div> ) } }