Question

我有一个带有路径的SVG贴图，当我将鼠标悬停在其上时，这些路径会更改颜色。它会更改特定部分的状态，例如我的状态如下：

  POL3139: {
    color: '#fbb9c5'
  },

离开路径后，我试图切换回基色。在这里，我要更改

onHover = (event) => {
event.stopPropagation();
const e = event.target.id
this.setState(prevState => ({
    [e]: {
      ...prevState,
      color: '#650df9'
    },
}));

}

它完全可以正常工作，并将我的颜色更改为所选颜色。但是随后，我试图恢复到原始状态。

我通过将基色设置为以下状态来进行了尝试：

  POL3139: {
    color: '#fbb9c5',
    base: '#fbb9c5'
  },

，然后onMouseLeave：

onLeave = (event) => {
event.stopPropagation();
const e = event.target.id;
this.setState(prevState => ({
  [e]: { 
    ...prevState,
    // color: prevState.base - doesn't work
    // color: prevState.[e].base - doesn't work
    // color: [prevState.e.base] - doesn't work
    color: 'pink'
  }
}));

}

我正在尝试许多可能的解决方案，但无法使其正常工作。我仍在学习反应，这可能很简单，但我无法弄清楚。

Answer 1

我认为您无法正确解构prevState。

以下是说明如何解构的示例：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    style: {
      color: "black",
      base: "black",
      cursor: "pointer"
    }
  };

  handleMouseEnter = e => {
    const { style } = this.state;
    this.setState({ style: { ...style, color: "red" } });
  };

  handleMouseLeave = e => {
    const { style } = this.state;
    this.setState({ style: { ...style, color: style.base } });
  };

  render() {
    return (
      <div
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
        style={this.state.style}
      >
        <h1>hello</h1>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在这种情况下，style等同于您的[e]。

尤其是在这里查看解构：

this.setState({ style: { ...style, color: style.base } });

有一个有效的示例here。

反应-预防问题，恢复旧价值

1 个答案: