问题

我有一个在组件中的 canvas，如下所示：

当鼠标指针进入 Canvas 时，它可以将指针更改为 crosshair。

import styles from '../css/basic-styles.module.css';

const ImagePreview = () => {
    const [mode, setMode] = useState(0);

    function changeMode(mode) {
        setMode(mode);
    }

    return (
        <canvas className={styles.canvas} width={200} height={200}></canvas>
    );
}

在 CSS 中：

canvas:hover {
    /*cursor:pointer;*/
    cursor: crosshair;
}

现在我想根据 mode 的值动态更改 CSS。

当 mode 为 1 时，我想使用 pointer。

我应该使用 css 吗？还是有方法可以使它工作？

import styles from '../css/basic-styles.module.css';

const ImagePreview = () =>{
    [mode,setMode] = useState(0);
    changeMode(mode){
       setMode(mode);
    }
    return (){
        <canvas className={styles.canvas} width=200 height=200></canvas>
    }
}

canvas:hover{
  /*cursor:pointer;*/
  cursor:crosshair;
}

答案1

得分: 1

请查看以下的解决方案。它也可以在沙盒中找到。请忽略为代码片段运行器包含的基本React解决方案。点击“运行代码片段”以在这里预览。

/* 解决方案 */
const ImagePreview = () => {
  const [mode, setMode] = useState(0);
  return (
    <canvas
      onMouseEnter={() => setMode(1)}
      onMouseLeave={() => setMode(0)}
      style={{
        backgroundColor: "teal",
        cursor: mode ? "crosshair" : "pointer"
      }}
      width={200}
      height={200}
    />
  );
};

// 这样可以在Stackoverflow代码片段预览中工作。//
const ImagePreview = () => {
  const [mode, setMode] = React.useState(0);
  const canvasCfg = {
    onMouseEnter: () => setMode(1),
    onMouseLeave: () => setMode(0),
    style: { backgroundColor: "teal", cursor: mode ? "crosshair" : "pointer" },
    width: 200,
    height: 200
  }
  return React.createElement('canvas', canvasCfg)
}

const domContainer = document.querySelector('#app');
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(ImagePreview));

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="app"></div>

<details>
<summary>英文:</summary>

Please see the solution below. It is also available in the [sandbox.][1]. Ignore the vanilla react solution it included for the snippet runner. Click `Run Code Snippet` to see preview here.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    /* Solution

    const ImagePreview = () =&gt; {
      const [mode, setMode] = useState(0);
      return (
        &lt;canvas
          onMouseEnter={() =&gt; setMode(1)}
          onMouseLeave={() =&gt; setMode(0)}
          style={{
            backgroundColor: &quot;teal&quot;,
            cursor: mode ? &quot;crosshair&quot; : &quot;pointer&quot;
          }}
          width={200}
          height={200}
        /&gt;
      );
    };

    */

    // This is so it can work in Stackoverflow snippet preview. //
    const ImagePreview = () =&gt; {
      const [mode, setMode] = React.useState(0);
      const canvasCfg = {
        onMouseEnter: () =&gt; setMode(1),
        onMouseLeave: () =&gt; setMode(0),
         style: { backgroundColor: &quot;teal&quot;, cursor: mode ? &quot;crosshair&quot; : &quot;pointer&quot;},
         width: 200,
         height: 200
      }
      return React.createElement(&#39;canvas&#39;, canvasCfg)
    }

    const domContainer = document.querySelector(&#39;#app&#39;);
    const root = ReactDOM.createRoot(domContainer);
    root.render(React.createElement(ImagePreview));

&lt;!-- language: lang-html --&gt;

    &lt;script crossorigin src=&quot;https://unpkg.com/react@18/umd/react.production.min.js&quot;&gt;&lt;/script&gt;
    &lt;script crossorigin src=&quot;https://unpkg.com/react-dom@18/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;


  [1]: https://codesandbox.io/s/sweet-tdd-4qblsp?file=/src/App.js:58-380

</details>



# 答案2
**得分**: 0

创建两个类似如下的类：

```css
canvas1:hover {
    cursor: pointer;
}

canvas2:hover {
    cursor: crosshair;
}

并根据模式条件性地使用它们，如下所示：

import styles from '../css/basic-styles.module.css';

const ImagePreview = () => {
    const [mode, setMode] = useState(0);

    const changeMode = (mode) => {
        setMode(mode);
    }

    return (
        <canvas className={mode === 1 ? styles.canvas1 : styles.canvas2} width={200} height={200}></canvas>
    );
}

你也可以在没有 :hover 的情况下使用这些类，这也会得到期望的结果，因为光标属性如下：

.canvas1 {
    cursor: pointer;
}

.canvas2 {
    cursor: crosshair;
}

canvas1:hover{
    cursor:pointer;
}


canvas2:hover{
    cursor:crosshair;
}

import styles from '../css/basic-styles.module.css';

const ImagePreview = () =>{
    [mode,setMode] = useState(0);
    changeMode(mode){
       setMode(mode);
    }
    return (){
        <canvas className={mode == 1 ? styles.canvas1 : styles.canvas2} width=200 height=200></canvas>
    }
}

.canvas1{
    cursor: pointer;
}
.canvas2{
    cursor: crosshair;
}