отреагировать сохранить возможность выделить текст с помощью компонента рендеринга

Question

У меня есть компонент с текстом. Это изменило собственное состояние компонента щелчком мыши. Но я хочу сохранить возможность выбора и копирования длинным кликом. Есть ли способ сделать это? Выбор сбрасывается после рендеринга компонента. Код например:

const App = () => {
    const [someState, setSomeState] = React.useState(0);

    const clickHandler = () => {
        setSomeState(someState + 1);
    }
    return (
        <div
            className="App"
            onClick={clickHandler}
        >
            {'State ' + someState}
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

Как насчет использования событий onMouseDown и onMouseUp самостоятельно и подсчета времени, которое пользователь потратил на нажатие вместо использования onClick? Например, вы можете сделать что-то вроде этого:

const App = () => {
  const [someState, setSomeState] = React.useState(0);
  const [timeDown, setTimeDown] = React.useState(-1);

  const clickHandler = () => setSomeState(someState + 1);

  const handleMouseDown = () => setTimeDown(Date.now()); // Save the time of the mousedown event
  const handleMouseUp = () => {
    const timeUp = Date.now();
    const timeDiff = timeUp - timeDown; // Calculate the time the user took to click and hold
    if (timeDiff < 1000) { // If it's shorter than 1000ms (1s) execute the normal click handler
      clickHandler();
    } else { // Execute some other logic, or just ignore the click
      // handleLongClick();
    }
  };

  return (
    <div
      className="App"
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
    >
      {"State " + someState}
    </div>
  );
};

Вы можете найти быстрые коды и коробку в виде демонстрации здесь