Javascript React.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 (
  <tbody>
    {dayItems.map(v => (
      <tr key={v.id}>
        <th>
          <div>{v.day}</div>
        </th>

        {this.state.intervalItems.map((v, i) => (
          <td
            key={v.id}
            onMouseDown={() => this._mouseDown()}
            onMouseMove={() => this._mouseDrag()}
            onMouseUp={() => this._mouseUp()}
            className={`table-inside-default ${this.state.bgColor}`}
          >
            {v.interval}
          </td>
        ))}
      </tr>
    ))}
  </tbody>
);
}
}

import React，{Component}来自'React'；
类TableBody扩展组件{
建造师（道具）{
超级（道具）；
此.state={
intervalItems:this.props.intervalItems，
国旗:0,，
bgColor:“”，
};
}
_mouseDown（）{
this.setState（prevState=>({
国旗:1,，
}));
}
_mouseUp（）{
this.setState（prevState=>({
国旗:0,，
}));
}
_鼠标袋（iD）{
if（this.state.flag==1）{
this.setState（prevState=>({
bgColor:'绿色'，
}));
}否则{
this.setState（prevState=>({
bgColor:“”，
}));
}
}
render（）{
const{daytems，intervalItems}=this.props；
返回(
{dayItems.map（v=>(
{v.day}
{this.state.intervalItems.map（（v，i）=>(
这个。_mouseDown（）}
onMouseMove={（）=>这个
onMouseUp={（）=>这个
className={`默认值内的表${this.state.bgColor}`}
>
{v.interval}
))}
))}
);
}
}

---

导出默认表体

看起来发生的事情是，您正在同时更新所有

标记的颜色。之所以会发生这种情况，是因为它们都引用了相同的状态，

This.state.bgColor

。当一个

td

被更改时，组件将被重新渲染，所有指向

this.state.bgColor

的元素将显示为相同的颜色

---

您可以考虑在您的状态中添加另一个属性，如<代码> .STATE .AccvItIs<代码>，并从您的代码>然后，根据您的

activeItem

，您可以设置指定的颜色，以便仅更新该颜色。您可能希望在单独的函数中重置

活动项

，以便在鼠标事件之间清除它。

当您调用

\u mouseUp（）

、

\u mouseDrag（）

或mouseDown（）时函数更改TableBody元素的颜色，并且每个

项都从该属性获取颜色，因此每个

项的颜色不是单独的

我建议您使用

创建一个子组件，这样子组件中的颜色和其他属性对于每个子元素都是独立的。应该是这样的：

class TableBody extends Components {
  ...
  render() {
    return (
      <tbody>
      ...
      {this.state.intervalItems.map((v, i) => (
        <ItemTable item={v} />
      ))}
      </tbody>
    )
  }
}

class ItemTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      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 { item } = this.props;
    return (
      <td
        key={item.id}
        onMouseDown={() => this._mouseDown()}
        onMouseMove={() => this._mouseDrag()}
        onMouseUp={() => this._mouseUp()}
        className={`table-inside-default ${this.state.bgColor}`}
      >
        {v.interval}
      </td>
    )
  }
}

类表体扩展组件{
...
render（）{
返回(
...
{this.state.intervalItems.map（（v，i）=>(
))}
)
}
}
类ItemTable扩展组件{
建造师（道具）{
超级（道具）；
此.state={
国旗:0,，
bgColor:“”，
};
}
_mouseDown（）{
this.setState（prevState=>({
国旗:1,，
}));
}
_mouseUp（）{
this.setState（prevState=>({
国旗:0,，
}));
}
_鼠标袋（iD）{
if（this.state.flag==1）{
this.setState（prevState=>({
bgColor:'绿色'，
}));
}否则{
this.setState（prevState=>({
bgColor:“”，
}));
}
}
render（）{
const{item}=this.props；
返回(
这个。_mouseDown（）}
onMouseMove={（）=>这个
onMouseUp={（）=>这个
className={`默认值内的表${this.state.bgColor}`}
>
{v.interval}
)
}
}

您能告诉我，

日项目

，

区间项目

是什么样的吗，这样我就可以复制您的代码了？