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 ，以便在鼠標事件之間清除它。

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