React函数组件实现：将点击的div类名追加至指定note类div

要实现点击颜色块给笔记追加对应类名的功能，你可以通过React状态管理来完成，具体步骤和修正后的代码如下：

1. 引入状态钩子：用useState记录当前选中的颜色类名，初始值为空
2. 编写点击处理函数：接收点击元素的类名，更新状态
3. 绑定点击事件：给四个颜色div绑定点击事件，传入各自的类名
4. 动态拼接类名：把状态中的类名拼到note的className中

修正后的完整代码：

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

function Note(props) {
    // 状态管理选中的颜色类名
    const [selectedClass, setSelectedClass] = useState('');

    // 处理颜色点击事件
    const handleColorClick = (colorClass) => {
        setSelectedClass(colorClass);
        // 如果需要切换选中状态（点击同个颜色取消选中），可以用下面的逻辑：
        // setSelectedClass(prev => prev === colorClass ? '' : colorClass);
    };

    return (
        <DraggableCore defaultPosition={{x: 1000, y: 200}}>
            {/* 动态拼接类名 */}
            <div className={`note ${selectedClass}`}>
                <div id="note_head">
                    <div id="note_bin"></div>
                    <div className="note_b" onClick={() => handleColorClick('note_b')}></div>
                    <div className="note_p" onClick={() => handleColorClick('note_p')}></div>
                    <div className="note_g" onClick={() => handleColorClick('note_g')}></div>
                    <div className="note_y" onClick={() => handleColorClick('note_y')}></div>
                    <div id="note_exit"></div>
                </div>
                <p>
                    {props.message}
                </p>
            </div>
        </DraggableCore>
    )
}

export default Note;

补充说明： #

• 原代码里的import React from 'react-dom'是错误的，需改为import React, { useState } from 'react'，useState属于React核心库
• 模板字符串${}比传统字符串拼接更简洁易读，推荐使用
• 如果需要实现“点击切换选中状态”，可以替换handleColorClick里的逻辑为注释内容

内容的提问来源于stack exchange，提问作者Justin