javascript - 如何正确处理 ReactJS 中的状态变化

Question

好人。

我有一个小程序，当单击“添加”时，它会添加表格行元素。单击表格单元格时还有一个颜色更改选项。问题是 - 当创建多个元素时，单击其中一个元素会更改所有元素的颜色，尽管我有一个 onClick 仅位于 TD 标签上。如何解决这个问题？

https://jsfiddle.net/mattighof/5nmcyL7b/

<table>
          {this.state.list.map((element, index) => {
            return (
              <tr>
                <td
                  className={this.state.textColor ? "trRed" : "trBlack"}onClick={this.handleClick}>
                  {element}
                  <div
                    onClick={e => this.removeElement(e, index)}
                    className="div"
                  />
                </td>
              </tr>
            );
          })}
        </table>

非常感谢您的建议。

Answer 1

由于您正在生成 <td>匿名函数中的元素，使用 this它里面将引用父闭包，在本例中是 Table成分。因此，textColor属性是组件本身的本地属性，而不是个人的<td>元素。

您已经在迭代保留在组件状态中的列表，因此您可以稍微更改元素结构以允许单独保留任意状态数据。

为此，不要将原始字符串添加到列表中，而是添加带有 text 的对象。和isSelected属性设置为所需的值，并在渲染 <td> 时元素或改变颜色，使用上述属性。当然，您可以根据自己的喜好命名这些属性，甚至添加更多属性来单独管理元素的状态。

另一件事需要注意的是 handleClick 的当前实现函数不知道您调用它的上下文，因此您还需要传递 index调用元素时的元素，并使用新的 list 更新您的状态其中指定索引处的元素已更新其状态。

这是根据我的命名修改后的函数:

addElement() {
  this.setState({
    list: this.state.list.concat({
      text: "element",
      isSelected: false
    })
  });
}

handleClick(e, index) {
  if (!this.state.list[index]) {
    return;
  }

  // to avoid any side effects, we're taking the immutable data approach
  // and creating a new list with intended values, rather than updating the list directly
  const oldElement = this.state.list[index];
  const newElement = Object.assign({}, oldElement, {isSelected: !oldElement.isSelected});

  const newList = [].concat(this.state.list);
  newList.splice(index, 1, newElement);

  this.setState({
    list: newList
  });
}

...
  {this.state.list.map((element, index) => {
    return (
      <tr>
        <td
          className={element.isSelected ? "trRed" : "trBlack"}
          onClick={e => this.handleClick(e, index)}
        >
          {element.text}
          <div
            onClick={e => this.removeElement(e, index)}
            className="div"
          />
        </td>
      </tr>
    );
  })}
...

我还 fork 了你的 fiddle 并用我上面提到的代码块更新了它:https://jsfiddle.net/w76frtgx/