如何在 ReactJS 中获取 onCut 的输入值

Question

我有一个组件UsernameInput，它通过redux store 进行管理。 我想在 onCut 事件触发时获取输入值。

import React from 'react'
import connect from 'react-redux'
import {validateUsername} from '../actions'

const UsernameInput = ({username, validateUsername}) => {
    
    return (

        <div className="form-group">
            <input type="text" className="form-control"
            onChange={e => validateUsername(e.target.value)}
            onPaste={e => validateUsername(e.clibboardData.getData('Text'))}
            onCut={e => validateUsername(e.currentTarget.value)}
            defaultValue={username}
            />
        </div>
    );
}

export default connect((state) => state.validateUsername, {validateUsername})(UsernameInput);

即如果输入的值为“blablabla”，并且在切割整个文本后validateUsername函数应该用空字符串调用，如果输入的一半被切割，那么应该用参数调用它“废话”。 onCut e.currentTarget.value 正在返回剪切前输入字段的值，但我希望它返回实际输入值。

怎么做？

Answer 1

我找到了一个独特的解决方案。而不是捕捉onChange、onPaste 和onCut 事件，我只是捕捉onKeyUp 事件：

<input type="text" className="form-control"
onKeyUp={e => validateUsername(e.currentTarget.value)}
defaultValue={username}
/>

它适用于所有事件。

reactjs

Answer 2

添加状态挂钩

显然我在这里有一个简单的例子，你应该在你的表单组件中集成这样的东西。对于更复杂的表单，甚至可以用 useReducer 替换 useState。

这个想法是你有一个状态。此状态具有设置器功能。设置状态后，组件会重新渲染。当组件重新渲染时，您可以通过状态访问组件中任何位置的值。

const myInput = (props) => {
  const [cutValue, setCutValue] = React.useState();
  
  console.log(cutValue); // this will start as undefined and then when setCutValue is triggered you will have the result

  return <input type="text" onCut={e => {setCutValue(e.target.value)}/>
}

Answer 3

所以 onCut 在浏览器处理默认的剪切行为之前被调用，这解释了你所看到的值。 https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event

在 onCut 被调用之后的某个点，onChange 也被调用，它反映了剪切后的实际输入值。如果知道您是否剪切很重要，您可以为 onCut 设置一些状态，然后在 onChange 中适当地处理它。

export default function App() {
  const [isCut, setIsCut] = React.useState(false);
  const [preCut, setPreCut] = React.useState("");
  return (
    <div className="App">
      <input
        onCut={(e) => {
          setIsCut(true);
          setPreCut(e.currentTarget.value);
        }}
        onChange={(e) => {
          console.log("isCutting", isCut);
          console.log("precut", preCut, "I changed", e.currentTarget.value);
          setIsCut(false);
          setPreCut("");
        }}
      />
    </div>
  );
}

这里的例子 https://codesandbox.io/s/dark-paper-k2pnr?file=/src/App.tsx