html 将单击的div的className添加到其他特定div

e37o9pze  于 2022-12-09  发布在  其他
关注(0)|答案(3)|浏览(125)

我有以下函数组件。在其中,当用户单击4个div(note_B、note_g、note_p、note_y)中的任何一个时,我希望将类名附加到className为note的div上
这是我的(不完整的)代码

import React from 'react-dom';
import DraggableCore from 'react-draggable';

function Note(props) {
    return (
        <DraggableCore defaultPosition={{x: 1000, y: 200}}>
            <div className={"note " + }>
                <div id="note_head">
                    <div id="note_bin"></div>
                    <div className="note_b" onClick={}></div>
                    <div className="note_p" onClick={}></div>
                    <div className="note_g" onClick={}></div>
                    <div className="note_y" onClick={}></div>
                    <div id="note_exit"></div>
                </div>
                <p>
                    {props.message}
                </p>
            </div>
        </DraggableCore>
    )
}

export default Note;
w1jd8yoj

w1jd8yoj1#

您可以对四个div中的每一个使用onClick事件处理函数,并将单击的className添加到带有className注解的div中。

**针对其他问题编辑:**为了防止添加的className在注解div内单击时卸载,我们可以使用事件侦听器来检查单击来自何处,如果它不是来自具有note_bnote_pnote_gnote_y className的元素,则不应删除className。

import React, { useState, useRef } from 'react';
import DraggableCore from 'react-draggable';

function Note(props) {
    const [className, setClassName] = useState('');
    const noteDiv = useRef(null);

    const handleClick = e => {
        setClassName(e.target.className);
    }

    //This function prevents the default event action from occurring when the page is unloaded. 
    //If the target element of the event does not have one of the specified class names, it removes the class from the element with the class "note".    
    const handleUnload = e => {
        e.preventDefault();
        const noteDiv = document.querySelector('.note');
        if (!['.note', 'note_b', 'note_p', 'note_g', 'note_y'].includes(e.target.className)) {
            noteDiv.classList.remove(e.target.className);
        }
    }

    return (
        <DraggableCore defaultPosition={{ x: 1000, y: 200 }}>
            <div ref={noteDiv} className={`note ${className}`} onClick={handleUnload}>
                <div id="note_head">
                    <div id="note_bin"></div>
                    <div className="note_b" onClick={handleClick}></div>
                    <div className="note_p" onClick={handleClick}></div>
                    <div className="note_g" onClick={handleClick}></div>
                    <div className="note_y" onClick={handleClick}></div>
                    <div id="note_exit"></div>
                </div>
                <p>
                    {props.message}
                </p>
            </div>
        </DraggableCore>
    )
}

export default Note;
s1ag04yj

s1ag04yj2#

谢谢你@安迪,我再次看了看状态挂钩,想出了这个:

import React, { useState }  from 'react';
import DraggableCore from 'react-draggable';

function Note(props) {
    const [bg, setBG] = useState('note_bg_b');

    return (
        <DraggableCore defaultPosition={{x: 1000, y: 200}}>
            <div className={"note " + bg}>
                <div id="note_head">
                    <div id="note_bin"></div>
                    <div className="note_b" onClick={() => setBG('note_b')}></div>
                    <div className="note_p" onClick={() => setBG('note_b')}></div>
                    <div className="note_g" onClick={() => setBG('note_b')}></div>
                    <div className="note_y" onClick={() => setBG('note_b')}></div>
                    <div id="note_exit"></div>
                </div>
                <p>
                    {props.message}
                </p>
            </div>
        </DraggableCore>
    )
}

export default Note;

这可能可以用一种更干净、更有效的方式来完成。然而,它是功能性的。

ttcibm8c

ttcibm8c3#

如果将类稍微分开,并为每个音符添加a data attribute,可能会更接近所需的内容。
不要使用node_b这样的className,而是使用两个类note b-note可以是所有音符的通用类,b可以是指定一个特定音符的类。
添加data属性可以更容易地识别代码中的每个注解。在click处理程序中,可以从被单击元素的数据集中解构注解ID,然后使用它来设置状态,并且可以在包含元素中使用该状态。
注意:我只在notes的包含元素上使用了一个click处理程序,这样我就可以使用event delegation
第一个

相关问题