如何在 React 上单击按钮时更改光标图标

Question

单击按钮时如何将光标更改为图标，然后在第二次单击时将该图标向下放置，并再次变为常规光标？我在 React 工作。我所拥有的是，当单击按钮时，单击的全局布尔值将变为 true。

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