react 选项卡问题

Question

1.多个选项卡如何实现？
2.平级的 通过操作number 所有的都开始联动了!
3.我的需求是 只向那一个选项卡 那一个选项卡开始切换

export default class Floor extends React.Component {
  constructor() {
    super();
    this.state = {
      floor: [],
      current:0,
      number:0
    };
  }

  onMouseEnter(e) {

    this.setState({
      current: e.target.getAttribute("data-index")
    })
  }

<div className="keywords">
                          <ul className="keywords-list r">
                            {list.list.map((list, index) => {
                              return (
                                <li
                                  className={
                                    "tab" +
                                    (this.state.current == index
                                      ? " current"
                                      : "")
                                  }
                                >
                                  <a
                                    data-index={index}
                                    onMouseEnter={this.onMouseEnter.bind(this)}
                                    href="#"
                                  >
                                    {list.listLi}
                                  </a>
                                </li>
                              );
                            })}
                          </ul>
                        </div>

            {list.list.map((list, index) => {
                          return (
                            <div
                              className={
                                "pro-showcase" +
                                (this.state.number == index ? " show" : "")
                              }
                            >
                              <ul className="brick-list">
                                {RandomSelection.getRandomArrayElements(
                                  list.proList,
                                  10
                                ).map(list => {
                                  return (
                                    <li className="brick l">
                                      <a className="pro-link" href={list.alink}>
                                        <img
                                          className="pro-img"
                                          src={list.brickImg}
                                        />
                                        <div className="pro-products">
                                          {list.Products}
                                        </div>
                                        <div className="pro-price">
                                          {list.proPrice}
                                        </div>
                                        <i className="dic">{list.dic}</i>
                                      </a>
                                    </li>
                                  );
                                })}
                              </ul>
                            </div>
                          );
                        })}