我有以下函数组件。在其中,当用户单击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;
3条答案
按热度按时间w1jd8yoj1#
您可以对四个div中的每一个使用onClick事件处理函数,并将单击的className添加到带有className注解的div中。
**针对其他问题编辑:**为了防止添加的className在注解div内单击时卸载,我们可以使用事件侦听器来检查单击来自何处,如果它不是来自具有
note_b
、note_p
、note_g
或note_y
className的元素,则不应删除className。s1ag04yj2#
谢谢你@安迪,我再次看了看状态挂钩,想出了这个:
这可能可以用一种更干净、更有效的方式来完成。然而,它是功能性的。
ttcibm8c3#
如果将类稍微分开,并为每个音符添加a data attribute,可能会更接近所需的内容。
不要使用
node_b
这样的className,而是使用两个类note b
-note
可以是所有音符的通用类,b
可以是指定一个特定音符的类。添加data属性可以更容易地识别代码中的每个注解。在click处理程序中,可以从被单击元素的数据集中解构注解ID,然后使用它来设置状态,并且可以在包含元素中使用该状态。
注意:我只在notes的包含元素上使用了一个click处理程序,这样我就可以使用event delegation。
第一个