如何使用Javascript实现点击时删除HTML div

Question

我有一个名为Display()的函数，它从Google日历中获取事件，并返回一个包含要呈现在屏幕上的元素列表（每个元素与滑块相关联）的列表（请参见Display()函数的返回语句），并按照这里所示进行渲染。因此，每个元素都带有一个Remove按钮，以便我可以使用位于Display()函数内部的hideMe()函数从页面中删除不需要的元素。hideMe()函数似乎起作用了，但它会删除页面上的所有元素，如此处所示。因此，我正在努力找出应该修复什么，以便当我单击Remove按钮时，它只删除与该remove按钮相关联的元素和滑块。我对React和JavaScript还不太熟悉，请帮忙解决。非常感谢您的任何帮助。

function Display() {
    const isMounted = useRef(true);
    const [items, saveItems] = useState([]);
    const [visible, setVisible] = useState(true);
    const [fading, setFading] = useState(false);

    useEffect(() => {
        return () => {
            isMounted.current = false;
        };
    }, []);

    useEffect(() => {
        (async () => {
            const items = await fetchItems();
            //Do not update state if component is unmounted
            if (isMounted.current) {
                saveItems(items);
            }
        })();
    }, []);

    function hideMe() {
        setFading(true);
        setTimeout(() => setVisible(false), 650);
    }

    return (
        <Tab.Pane attached={false}>
            <h5>Rate stress level for each event</h5>
            <br/>
            {items.map(item => (
                    <div key={item.id} isvisible={!fading}
                         style={visible ? null : { display: "none" }}>
                        <Typography id="discrete-slider-restrict" gutterBottom>
                           {item}
                           <button onClick={hideMe}>Remove</button>
                        </Typography>
                        <PrettoSlider aria-label="pretto slider" defaultValue={98} step={null}marks={stresslevel}/>
                    </div>
            ))}
        </Tab.Pane>
    )
}

- Red Apple

---

你能否在这里添加一个 Fiddle 示例，以便我们可以轻松调试？ - Akhil Aravind

Answer 1

我觉得这个问题的原因是所有元素都处于同一个状态，或者说它们共享同一个状态。所以这个函数会对所有元素执行。如果您能将其提取到一个新组件中并在那里使用hideMe函数，我确信它将针对每个单独的元素正常工作。

这是我的建议，请看下面。也许您需要做一些微调。

您可以将元素提取到一个单独的组件中，例如：

const Item = props => {

     const [visible, setVisible] = useState(true);
     const [fading, setFading]   = useState(false);

     function hideMe() {
         setFading(true);
         setTimeout(() => setVisible(false), 650);
     }

     return (
         <div isvisible={!fading} style={visible ? null : { display: "none" }}>
            <Typography id="discrete-slider-restrict" gutterBottom>
                  {item}
               <button onClick={hideMe}>Remove</button>
            </Typography>
            <PrettoSlider aria-label="pretto slider" defaultValue={98} 
                          step={null} marks={stresslevel}/>
         </div>
     );

};
export default Item;

然后你可以像这样使用它：

  // import Item
{items.map(item => (
    <Item key={item.id} itemObj={item} /> 
    // in case if you need item obj then props.itemObj will get you the object.
))}

---

通过这种方式，您可以使用单独的特定项目组件来管理hideMe函数。

- Jai