javascript - React.js 映射如何改变单个元素

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在一个单独的函数中，以便它在鼠标事件之间被清除。