reactjs - 从单击获取索引并将类设置为反应组件中另一个容器中的相同索引

Question

我试图在单击链接时获取索引，然后将类设置为单击的链接，并将类设置为另一个容器中的相同索引。

小提琴链接：https ://jsfiddle.net/iBertel/jw34bLed/5/

到目前为止，这是我的代码：

import React, { Component } from 'react'

const arrLinks = ['Link1', 'Link2', 'Link3']
const arrContent = ['Content1', 'Content2', 'Content3']

class Tabbing extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            activeLinkId: false,
            activeContentId: false
        };
    }

    setActiveElement(id){
        this.setState({activeLinkId: id})
        this.setState({activeContentId: id})
    }

    handleClick() {
        //console.log(e.target.getAttribute('data-key'));

        const currentLinkState = this.state.activeLinkId;
        const currentContentState = this.state.activeContentId;

        this.setState({
            activeLinkId: !currentLinkState, 
            activeContentId: !currentContentState 
        });
    }

    render() {
        return (
            <div>
                <ul className="container-one">
                    {arrLinks.map((arrLinks, index) => 
                        <li 
                            data-key={arrLinks} 
                            key={index} 
                            className={index === this.state.activeLinkId ? 'active' : null} 
                            onClick={() => this.handleClick(index)}
                        >
                            {arrLinks}
                        </li>
                    )}
                </ul>

                <ul className="container-two">
                    {arrContent.map((arrContent, index) => 
                        <li 
                            key={index}
                            data-key={arrContent} 
                            className={index === this.state.activeContentId ? 'active' : null} 
                        >
                            {arrContent}
                        </li>
                    )}
                </ul>
            </div>
        )
    }
}

export default Tabbing

标签： reactjsindexinghyperlink

Answer 1

添加index参数handleClick并保存在状态中。我假设数组具有相同的长度，arrLinks并且arrContent您想使用相同的索引来切换两者的活动类。在状态中只使用一个索引，无需复制它。

class Tabbing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeLinkId: null
    };
  }

  handleClick = index => {
    this.setState({
      activeLinkId: index
    });
  }

  render() {
    return (
      <div>
        <ul className="container-one">
          {arrLinks.map((arrLink, index) => (
            <li
              data-key={arrLinks}
              key={index}
              className={index === this.state.activeLinkId ? "active" : null}
              onClick={() => this.handleClick(index)}
            >
              {arrLink}
            </li>
          ))}
        </ul>

        <ul className="container-two">
          {arrContent.map((arrContent, index) => (
            <li
              key={index}
              data-key={arrContent}
              className={index === this.state.activeLinkId ? "active" : null}
            >
              {arrContent}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}