Добавить класс к следующим кнопкам внутри функции карты - PullRequest
Новая
       14

Добавить класс к следующим кнопкам внутри функции карты

0 голосов
/ 18 апреля 2020

У меня есть функция, которая добавляет класс onClick. 

import * as React from 'react'

class ThisClass extends React.Component<any,any> {
  constructor(){
    super()
    this.state = {active: ''}
    this.ThisFunction = this.ThisFunction.bind(this)
  }

  const items = ['button1', 'button2', 'button3']

  ThisFunction (i) {
    this.setState({
      active: i
    })
  }

  render(){
    return(
      <div>
        {
          items.map((item, i) => {
            return(
              <button
                onClick={()=>this.ThisFunction(i)}>{item}
                className={`this_button ${this.state.active ? 'active' : ''}`}
                {item}
              </button>
            )
          })
        }
      </div>
    )
  }
}

export default ThisClass

Что должно произойти: 

<div>
 <button class='this_button active'>button1</button>
 <button class='this_button active'>button2</button>
 <button class='this_button'>button3</button>
</div>

Что на самом деле происходит: 

<div>
 <button class='this_button active'>button1</button>
 <button class='this_button'>button2</button>
 <button class='this_button'>button3</button>
</div>

Мне нужно иметь максимум две активные 'функции класса onClick. Есть ли способ обойти это?

Ответы [ 2 ]

3 голосов
/ 18 апреля 2020

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

state = {
  active: []
};

thisFunction = i => {
  if (this.state.active.includes(i)) return; // already active!!
  const active = [...this.state.active, i].slice(-2); // keep last 2
  this.setState({ active });
};

У вас также были некоторые синтаксические ошибки в рендеринг кнопок. Имя класса было установлено как часть текста кнопки. Установите активный класс, если массив this.state.active содержит активный индекс 

{["button1", "button2", "button3"].map((item, i) => {
  return (
    <button
      onClick={() => this.thisFunction(i)}
      className={`this_button ${
        this.state.active.includes(i) ? "active" : ""
      }`}
    >
      {item}
    </button>
  );
})}

Edit confident-platform-72759

0 голосов
/ 18 апреля 2020

В вашем коде есть несколько серьезных ошибок.

  1. Вы помещаете свойство className в качестве дочернего элемента на кнопку, вместо этого используется атрибут
  2. Каждый дочерний элемент в списке, например ваши кнопки должны иметь клавишу
  3. Вы дважды связываете функцию, одну на конструкторе и другую на событии onClick, используя функцию стрелки. Привязать функцию 

class ThisClass extends React.Component {
  constructor(){
    super()
    this.state = {active: ''}
  }

  
  ThisFunction (i) {
    this.setState({
      active: i
    })
  }

  render(){

    const items = ['button1', 'button2', 'button3']

    return(
      <div>
        {
          items.map((item, i) => {
            return(
              <button
                key={i}
                onClick={() => this.ThisFunction(i)}
                className={`this_button ${this.state.active === i ? 'active' : ''}`}>
                  {item}
              </button>
            )
          })
        }
      </div>
    )
  }
}

ReactDOM.render(
  <ThisClass />,
  document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
...