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

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

我有一个组件UsernameInput，该组件通过redux存储进行管理。 我想在触发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之后，应使用空字符串调用该函数，如果剪切了一半的输入，则应使用参数，例如“ blab”。 onCut e.currentTarget.value在剪切前返回输入字段的值，但我希望它返回实际输入值。

如何做到？

解决方法

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

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

，它适用于所有事件。

reactjs

,

添加状态钩子

很显然，这里有一个简单的示例，您应该在表单组件中集成类似的内容。也许甚至用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)}/>
}

,

因此，在浏览器处理cut的默认行为之前，将调用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