Question

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

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>
);
}
}

导出默认TableBody；

Answer 1

看来，您正在一次更新所有<td>标签的颜色。之所以发生这种情况，是因为它们都引用相同的状态this.state.bgColor。更改一个td后，该组件将重新呈现，并且指向this.state.bgColor的所有元素将显示为相同的颜色。

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

Answer 2

当调用_mouseUp()，_mouseDrag()或_ mouseDown()函数时，您将更改TableBody元素上的颜色，并且每个<td>项都从该属性获取颜色，因此颜色不是每个<td>的颜色。

我建议您使用<td>创建一个子组件，以便您在子组件中放置的颜色和其他属性对于每个子元素都是独立的。会是这样的：

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>
    )
  }
}

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

2 个答案: