Реагировать JS Toogle Class - PullRequest
Новая
       3

Реагировать JS Toogle Class

0 голосов
/ 19 февраля 2020

У меня есть проект, который я разрабатываю с помощью React JS. Проблема в том, что у меня есть кнопка, и когда я нажимаю на нее, я просто хочу значок на кнопке, которую я нажимаю, чтобы изменить. Но значки на всех кнопках я нажимаю изменить. Мой код ниже. 

constructor(props){
super(props)
this.state={
    icon: false
}
}

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

.....

const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
<ul>
    {menu.map((item,index) => 
        <li key = {index}>
            <Link data-id = {index} className="inactive" to={`${match.url}`} onClick={this.active}>
                <span>
                    <span>
                        <FontAwesomeIcon icon={faHome} className="icon"/>
                    </span>
                    {item}
                </span>
                <FontAwesomeIcon data-id = {index} icon={icon ? faAngleDown:faAngleRight} className="angle"/>
            </Link>
        </li>
    )}
</ul>

Как мне это исправить?

Ответы [ 2 ]

1 голос
/ 19 февраля 2020

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

constructor(props){
super(props)
this.state={
    icon: false,
    clickedIndex: -1,
}
}

active = (clickedIndex)=> (event) => {
    this.setState(prevState => ({icon: !prevState.icon, clickedIndex }));          
}

.....

const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
<ul>
    {menu.map((item,index) => 
        <li key = {index}>
            <Link data-id = {index} className="inactive" to={`${match.url}`} onClick={this.active(index)}>
                <span>
                    <span>
                        <FontAwesomeIcon icon={faHome} className="icon"/>
                    </span>
                    {item}
                </span>
                <FontAwesomeIcon data-id = {index} icon={(icon && index === this.state.clickedIndex) ? faAngleDown:faAngleRight} className="angle"/>
            </Link>
        </li>
    )}
</ul>
0 голосов
/ 19 февраля 2020

Пример того, как вы можете выбрать конкретный. живое демо https://codesandbox.io/s/focused-browser-fls2w

export default class Abc extends Component {
  constructor(props) {
    super(props);
    this.state = { icon: false };
  }
  active = item => {
    this.setState({ icon: item });
  };
  render() {
    const menu = ["A", "B", "C", "A", "B", "C", "A", "B", "C"];
    return (
      <div className="nav_menu">
        <ul>
          {menu.map((item, index) => (
            <li
              key={index}
              onClick={() => this.active(index)}
              style={{ color: this.state.icon === index ? "red" : "" }}
            >
              {item}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
...