Создание переключателей в React - PullRequest
Новая
       49

Создание переключателей в React

1 голос
/ 26 мая 2020

Итак, у меня есть эти 4 блока:

Как я могу изменить эти обычные блоки, чтобы они работали как переключатели? Когда я нажимаю на один из них, я хочу действовать как переключатель и делать что-то, например, изменять цвет границы.

Вот код: 

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

1 Ответ

0 голосов
/ 26 мая 2020

Вы можете узнать из этого кода, чтобы решить ваш случай. Этот подход используется только для справки.

Примечание: вам нужно новое имя класса для класса переключения, отличное от имени класса по умолчанию. 

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 ().

...