Javascript 如何在ReactJS中获取输入值

我有一个组件

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

从“React”导入React
从“react redux”导入连接
从“../actions”导入{validateUsername}
const UsernameInput=（{username，validateUsername}）=>{
返回(
validateUsername（e.target.value）}
onPaste={e=>validateUsername（e.clibboardData.getData（'Text'））}
onCut={e=>validateUsername（e.currentTarget.value）}
defaultValue={username}
/>
);
}
导出默认连接（（state）=>state.validateUsername，{validateUsername}）（UsernameInput）；

也就是说，如果输入的值为“blabla”，在剪切整个文本后，应该使用空字符串调用函数

validateUsername

，如果剪切了一半输入，则应该使用类似“blab”的参数调用函数。

---

onCut

e.currentTarget.value

返回剪切前输入字段的值，但我希望它返回实际的输入值

如何操作？

添加状态挂钩 显然，我这里有一个简单的示例，您应该在表单组件中集成类似的内容。对于更复杂的表单，甚至可以用useReducer替换useState

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

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

constmyinput=（道具）=>{
常量[cutValue，setCutValue]=React.useState（）；
console.log（cutValue）；//这将以未定义的形式开始，然后当触发setCutValue时，您将得到结果
返回{setCutValue（e.target.value）}/>
}

我找到了一个独特的解决方案。我没有捕获

onChange

、

onPaste

和

onCut

事件，而是捕获

onKeyUp

事件：

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

validateUsername（e.currentTarget.value）}
defaultValue={username}
/>

它对所有事件都有效

---

因此，在浏览器处理默认剪切行为之前，会调用onCut，该行为解释了您所看到的值。

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

导出默认函数App（）{
const[isCut，setIsCut]=React.useState（false）；
const[preCut，setPreCut]=React.useState（“”）；
返回(
{
setIsCut（真）；
setPreCut（如当前目标值）；
}}
onChange={（e）=>{
log（“isCutting”，isCut）；
log（“precut”，precut，“I changed”，即currentTarget.value）；
setIsCut（假）；
setPreCut（“”）；
}}
/>
);
}

这里的例子

---

为什么不将输入值存储在状态中？@johannchopin我正在使用redux，并发送输入值。

e.currentTarget.value

将返回最后一个值。i、 e.如果你剪切整个输入，而不是返回空字符串，它将在我不使用React钩子之前返回值。

onChange

在从输入字段剪切文本时不会触发。也许我误解了你的意思，但在沙盒中，如果您在控制台中查看并执行以下步骤：-在输入中键入一些文本-在控制台中ctrl+x，您将看到值在剪切前的状态，而onChange e.currentTarget.value是后期剪切。您使用的是什么版本的React？onKeyUp确实是一种处理此问题的古怪方式。从语义上讲，该方法用于对特定密钥的释放作出反应。切割时，您至少要进行两个事件。ctrl+x或cmd+x