Как переключить класс по клику в функции карты? - PullRequest
Новая
       11

Как переключить класс по клику в функции карты?

0 голосов
/ 31 октября 2019

Переключение на один элемент - это бриз. Но мне трудно переключаться с функцией карты. Нажатие на дочерний элемент должно переключить «активный». Но происходит то, что каждый элемент получает класс «активный». Взгляните: 

constructor() {
   super()
   active: false

   this.toggleClick = this.toggleClick.bind(this)
}

toggleClick() {
   this.setState(state=> ({
         active: !state.active   
      })
   )
}

... в моем классе функций ... 

function ThisClass(props){
   return(
      <div>
         {
            items.map((item,i) => {
               return(
                  <span role="button" className={`${props.active ? 'active' : ''}`} key={i} onClick={() => props.toggleClick(i)}>{item.text}</span>
               )
            })
         }
      </div>
   )
}

Это мой желаемый вывод: 

<div>
   <span class="active">A</span>
   <span class="">B</span>
   <span class="">C</span>
</div>

Вместо этогостановится результатом 

<div>
   <span class="active">A</span>
   <span class="active">B</span>
   <span class="active">C</span>
</div>

И, конечно, переключение должно работать. один клик сделает текущий активным. И повторное нажатие удалит активное состояние. Также, нажав текущее состояние, предыдущий активный элемент должен быть удален с активным.

Ответы [ 3 ]

1 голос
/ 31 октября 2019

попробуйте присвоить вашему «активному» состоянию индекс вместо логического

изменить код

с

className = {${props.active ? 'active' : ''}}

до

className = {${props.active === i ? 'active' : ''}}

Ваша функция переключения должна выглядеть следующим образом 

toggleClick(i) {
    this.setState({ active: i })
}
0 голосов
/ 04 ноября 2019

Вот мое собственное решение (вместе с @ 404notBrighton): В моем состоянии: ... вместо 

this.state = {active:false}

я изменил его на 

this.state = {active:null}

в моем toggleClick() Я положил 

this.setState({ active: i });
if (this.state.active === i) {
   this.setState({ active: null })
}

, наконец, в моем классе ... 

<span role="button" className={`${props.active === i ? 'active' : ''}`} key={i} onClick={() => props.toggleClick(i)}>
0 голосов
/ 31 октября 2019

Как я понимаю, вы хотите иметь только один активный элемент.

Вам необходимо сохранить два состояния, как selectedItemId и selectedItemState. И обновляйте их значения при нажатии кнопки.

Таким образом, вы можете попробовать что-то вроде этого: 

import React, { Component } from "react";

class App extends Component {
  state = {
    items: [{ id: 1, text: "A" }, { id: 2, text: "B" }, { id: 3, text: "C" }],
    selectedItemId: null,
    selectedItemState: false
  };

  toggleClick = id => {
    if (id === this.state.selectedItemId) {
      this.setState({
        selectedItemState: !this.state.selectedItemState
      });
    } else {
      this.setState({
        selectedItemId: id,
        selectedItemState: true
      });
    }
  };

  render() {
    const { selectedItemId, selectedItemState } = this.state;

    return this.state.items.map(el => (
      <div key={el.id}>
        <span
          role="button"
          className={
            el.id === selectedItemId && selectedItemState ? "active" : ""
          }
          onClick={() => this.toggleClick(el.id)}
        >
          {el.text} -{" "}
          {el.id === selectedItemId && selectedItemState ? "active" : "passive"}
        </span>
        <br />
      </div>
    ));
  }
}

export default App;

Примеры кодов andbox:

https://codesandbox.io/s/spring-thunder-w711z

...