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

**针对其他问题编辑：**为了防止添加的className在注解div内单击时卸载，我们可以使用事件侦听器来检查单击来自何处，如果它不是来自具有note_b、note_p、note_g或note_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;

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

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;

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

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