如何在React中点击按钮后更改光标图标

Question

我如何在React中实现当我点击一个按钮时，将鼠标指针更改为图标，并在第二次点击时放置该图标，然后再次变为常规鼠标指针？当我单击按钮时，全局布尔值“clicked”被设置为true。

- user12677345

---

请问您能提供一些代码吗？ - johannchopin

请查看此链接（https://css-tricks.com/using-css-cursors/），了解如何使用CSS添加自定义光标。在React中，您需要在onClick事件中添加类，并通过重新单击删除该类。您可以使用状态来添加或删除类。 - Monzoor Tamal

请查看此链接并查看悬停示例：https://www.w3schools.com/css/css_pseudo_classes.asp，同时我还发现了CSS cursor属性：https://www.w3schools.com/cssref/pr_class_cursor.asp。 - Alan M

Answer 1

这对你的需求有用吗？

const [cursor, setCursor] = useState('crosshair');


  const changeCursor = () => {
    setCursor(prevState => {
      if(prevState === 'crosshair'){
        return 'pointer';
      }
      return 'crosshair';
    });
  }

  return (
    <div className="App" style={{ cursor: cursor }}>

      <h2>Click to change mouse cursor</h2>
      <input  type="button" value="Change cursor" 
      onClick={changeCursor}
      style={{ cursor: cursor }}

      />
    </div>
  );

- rMonteiro

---

这对我有用！我该如何添加自定义光标组件？我的样式文件夹中有一个名为altCursor.png的png文件，但是此文件在我的样式文件夹之外。 - user12677345

@user12677345 我不确定，在这个页面中，他们使用url()来定义自定义光标。 - rMonteiro