Question

在单击“单击我”链接时，我需要选择一个带有班级描述的段落，然后将班级添加到该段中。
我尝试使用e.currentTarget + previousSibling来完成此操作，但没有成功。
在React TS中如何做？
我的代码：

import React, { useRef, useEffect, useState } from 'react';
import { Item } from '../types';


interface Props {
    handleData: (item: Item) => void;
}

const CartList = (props: Props) => {
    const description = useRef(null)
    const [items, setItems] = useState<Item[]>([]);

    const showMore = (e: Event) => {
        e.preventDefault();

        });
    };

    useEffect(() => {
        fetch(`./list.json`)
            .then((response) => response.json())
            .then((data) => setItems(data))
            .catch((error) => console.error(error));
    }, []);

    return (
        <main className="container">
            <ul className="row item-list">
                {items.map((item: Item, index: number) => (
                    <li key={item.id} className="col-xl-3 item">
                        <div className="item-wrap p-3">
                            <p
                                className="item-description"
                                ref={description}
                            >
                                {item.description}
                            </p>
                            <a href="." onClick={(e: any) => showMore(e)}>
                                Click me
                            </a>
                        </div>
                    </li>
                ))}
            </ul>
        </main>
    );
};

export default CartList;

Answer 1

你可能会有类似的东西

const [yourClass, setYourClass] = useState('Name Before')

在按钮内部具有onClick={setClicked('Name after')}之类的onClick

然后确保将类设置为yourClass

Answer 2

我知道如何将类切换到元素，但是我不知道如何将其分配给正确的元素。假设我有5个元素，然后单击它们中的第一个。该类应该分配给第一段，但是React找到ref“ description”的最后一个存在，因此该类将位于最后一段。这是不正确的。

反应选择特定的参考

2 个答案: