react save possibility to select text with re-render component

Question

i have component with text. It changed component own state with mouse click. But i want to save possibility to select and copy in by long click. Is there way to make it ? Selection is reset after rerender component. Code for example:

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

Try this out https://stackoverflow.com/questions/19539329/how-to-apply-long-click-event-and-doubleclick-event-on-the-same-element-in-javas — HpDev, Mar 06 '20 at 11:48
It won't try it out once , you wont be seeing any lag in UI. have used personally !! — HpDev, Mar 06 '20 at 12:47

score 1 · Accepted Answer · answered Mar 06 '20 at 13:26

How about using onMouseDown and onMouseUp events yourself and calculate the time the user took to click instead of using onClick? You could for example do something like this:

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

You can find a quick codesandbox as a demo here

react save possibility to select text with re-render component

1 Answers1