css - 如何更改按钮上的光标图标单击 React

Question

如何在单击按钮时将光标更改为图标，然后在第二次单击时将该图标向下放置，然后再次变为常规光标？我在 React 工作。我所拥有的是，当我单击按钮时，单击的全局 bool 值变为 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>
  );