反应保存的可能性选择文本与重新渲染组件

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

你可以在这里找到一个快速的代码沙盒作为演示