javascriptReact.js映射如何更改单个元素

这是代码,因此我有一个呈现间隔列的组件,我想在单击和拖动时更改表格的颜色,但是发生的是,它改变了所有内容……我是一个完整的初学者,所以我我真的不知道该怎么办

import React, { Component } from 'react';
class TableBody extends Component {
constructor(props) {
super(props);
this.state = {
intervalItems: this.props.intervalItems,
flag: 0,
bgColor: '',
};
}
_mouseDown() {
this.setState(prevState => ({
flag: 1,
}));
}
_mouseUp() {
this.setState(prevState => ({
flag: 0,
}));
}
_mouseDrag(iD) {
if (this.state.flag == 1) {
this.setState(prevState => ({
bgColor: 'green',
}));
} else {
this.setState(prevState => ({
bgColor: '',
}));
}
}
render() {
const { dayItems, intervalItems } = this.props;
return (

{dayItems.map(v => (




导出默认的TableBody;

解决方法:

看起来正在发生的事情是您正在为所有一次标记.发生这种情况是因为它们都引用同一个状态this.state.bgColor.更改一个td时,将重新渲染该组件,所有指向this.state.bgColor的元素都将显示为相同的颜色.

您可能会考虑向状态添加另一个属性,例如this.state.activeItem,并通过_mouseDrag函数对其进行更新.然后,根据您的activeItem,您可以设置一种指定的颜色,以便仅更新一种颜色.您可能希望在单独的函数中重置activeItem,以便在鼠标事件之间将其清除.