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>
);
}
}

现场演示

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>
);
}
}

实时演示

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

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>
);
}
}

演示

Answer 2

您可以通过使用两个独立的ref来实现这一点，下面是演示：https://stackblitz.com/edit/react-b1wa4f?file=src%2FApp.js

Answer 3

我得到了这个：

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>
);
}
}

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