使用 React 在输入上通过 onPaste 事件获得双倍值

Question

我的 React 应用程序中有一个文本输入字段，我想验证其输入，因此我有一个验证器函数在 onChange 事件的处理程序中工作。我还想在将值粘贴到输入中时修剪空格，然后让它通过 onChange 验证器运行。

目前我的 JSX 看起来像这样：

handleChange(event) {
    let { name, value } = event.target
    if (typeof this.props.validatorFunction === "function") {
        value = this.props.validatorFunction(value) // the validator function in this case is {value => value.replace(" ", "-").toLowerCase()}
    }
    this.setState({
        [name] : value
    })
}

handlePaste(event) {
    let { name, value, selectionStart, selectionEnd } = event.target
    let pastedValue = event.clipboardData.getData("text")
    let pre = value.substring(0, selectionStart)
    let post = value.substring(selectionEnd, value.length)
    value = (pre + pastedValue + post).trim()
    this.setState({
        [name] : value
    })
}

render() {  
    return (
        <input type="text" name="myInput" value={this.state.myInput} onChange={this.handleChange} onPaste={this.handlePaste}></input>
    )
}

常规输入按预期工作，但是，当我粘贴诸如“测试字符串”之类的内容时，我得到“测试字符串测试字符串”。“test String”带有尾随空格，我得到“test-stringtest string”。除了将未修剪但以某种方式小写但未替换的原始字符串加倍之外，此方法有效。我该如何解决这个问题，或者使用 React 控制组件进行此类验证的正确工作流程是什么？

Answer 1

event.preventDefault()您需要在处理粘贴事件后调用。实际上，粘贴事件正在更改 的状态handlePaste，然后继续将粘贴的文本添加到输入中，从而触发handleChange。