Reactjs - 以正确的方式独立切换类

Question

我正在尝试添加一个类并将其删除，它已经可用。我正在为每个元素分别做。但它总是指最后一个元素。这样做的正确方法是什么？

有没有简单而优雅的方法来做到这一点？

这是我的组件：

import React from "react";
import "./style.css";

export default class App extends React.Component {
  divRef;
  constructor(props){
    super(props)
    this.divRef = React.createRef();
  }
  toggleView = (e) => {
        e.preventDefault();
        if(this.divRef.current.classList.contains("active")){
          this.divRef.current.classList.remove("active"); //always refer div 2!?
          return;
        }
        this.divRef.current.classList.add("active");
    }
  render(){
     return (
    <div class="parent">
      <div ref={this.divRef}>
      1
      <a href="#" onClick={(e) => this.toggleView(e)}>toggle</a>
      </div>
      <div ref={this.divRef}>2
      <a href="#" onClick={(e) => this.toggleView(e)}>toggle</a>
      </div>
    </div>
  );
  }
}

Live demo

Answer 1

我会利用state 来实现这一点。不需要refs。

import React from "react";
import "./style.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      view1: false,
      view2: false
    };
  }
  toggleView = (e, view) => {
    e.preventDefault();
    this.setState({ [view]: !this.state[view] });
  };
  render() {
    return (
      <div class="parent">
        <div className={this.state.view1 ? "active" : ""}>
          1
          <a href="#" onClick={e => this.toggleView(e, "view1")}>
            toggle
          </a>
        </div>
        <div className={this.state.view2 ? "active" : ""}>
          2
          <a href="#" onClick={e => this.toggleView(e, "view2")}>
            toggle
          </a>
        </div>
      </div>
    );
  }
}

Live Demo

编辑： 在这里，我展示了当我们有很多项目时这种方法如何扩展

import React from "react";
import "./style.css";

const NUM_ITEMS = 20;
const items = Array.from({ length: NUM_ITEMS }).map((_, idx) => ({
  title: "title" + idx,
  active: false
}));

const Item = ({ active, title, onToggle }) => (
  <div className={active ? "active" : ""}>
    {title}
    <a
      href="#"
      onClick={e => {
        e.preventDefault();
        onToggle();
      }}
    >
      toggle
    </a>
  </div>
);

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items
    };
  }
  toggleView = idx => {
    const items = [...this.state.items];
    items[idx] = { ...items[idx], active: !items[idx].active };
    this.setState({ items });
  };
  render() {
    return (
      <div class="parent">
        {this.state.items.map((item, idx) => (
          <Item
            key={item.title}
            active={item.active}
            title={item.title}
            onToggle={() => this.toggleView(idx)}
          />
        ))}
      </div>
    );
  }
}

Demo

Answer 2

我明白了：

import React from "react";
import "./style.css";

export default class App extends React.Component {
  divRef;
  constructor(props){
    super(props)
    this.divRef = React.createRef();
  }
  toggleView = (e) => {
        e.preventDefault();
        const element = e.currentTarget.parentElement.classList;
        if(element.contains("active")){
          element.remove("active");
          return;
        }
        element.add("active");
    }
  render(){
     return (
    <div class="parent">
      <div ref={this.divRef}>
      1
      <a href="#" onClick={(e) => this.toggleView(e)}>toggle</a>
      </div>
      <div ref={this.divRef}>2
      <a href="#" onClick={(e) => this.toggleView(e)}>toggle</a>
      </div>
    </div>
  );
  }
}

如果有人发现，这不是正确的方法，请告诉我

Answer 3

也许你可以通过使用两个单独的参考来做到这一点，这里是演示：https://stackblitz.com/edit/react-b1wa4f?file=src%2FApp.js