Как изменить значок курсора при нажатии кнопки на 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>
  );