在React中创建单选按钮

Question

所以我有这4个divs。

我怎样才能把这些普通的divs改成单选按钮？我想，当我按下其中一个时，就像一个单选按钮，并做一些事情，比如改变边框的颜色。

下面是代码。

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

Answer 1

你可以借鉴这段代码来解决你的问题。这只是一个方法，仅供参考。

注意：你需要为toggle类起一个新的类名，而不是默认的类名。

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

请看React文档中使用React.createRef()。