Question

如何使用onPaste event在Reactjs中粘贴到文本字段中时从字符串中删除空格，以便显示在文本字段内的最终字符串之间没有空格。

我的HTML代码如下：

<input placeholder="Enter your First Name" onPaste={(event) => this.onFirstNamePaste(event)}/>

事件处理程序：

onFirstNamePaste(event){
    var text = event.clipboardData.getData('Text')
    this.value = text.replace(/\s/g,'');
 }

Answer 1

试试这个：

 onFirstNamePaste(event){
    var text = event.clipboardData.getData('Text')
    this.value = text.split(' ').join('');
 }

Answer 2

使用输入元素的ref属性

<input 
    ref={(nameInput) => { this.nameInput = nameInput; }}
    placeholder="Enter your First Name"
    onPaste={(event) => this.onFirstNamePaste(event)}
/>

然后在函数内部，

onFirstNamePaste(event){
    const text = event.clipboardData.getData('Text')
    this.nameInput.value = text.split(' ').join('');
}

您还可以使用组件状态来跟踪输入中的更改并更新状态以反映更改。

<input 
    value={this.state.nameValue}
    onChange={(e) => this.setState({ nameValue: e.target.value }) }
    placeholder="Enter your First Name"
    onPaste={(event) => this.onFirstNamePaste(event)}
/>

在粘贴功能中，

onFirstNamePaste(event){
    const text = event.clipboardData.getData('Text')
    const value = text.split(' ').join('');
    this.setState({ nameValue: value });
}

如何在reactjs中删除onPaste上的空格

2 个答案: