javascript - 在 React 中使用正则表达式限制粘贴输入值

Question

我有输入字段来放置电话号码，并且我想限制每个特殊字符，例如

+,- .

来 self 的带有 onPaste 事件的输入字段。我下面的代码不起作用，我仍然可以将这些特殊字符粘贴到我的输入字段

onPaste(e) {
  let str = e.target.value;
  let newstr = str.replace(/[+-.]/g, '');
  if (str !== newstr) {
  e.preventDefault();
 }}

我的输入代码

<InputText
  name="officePhone"
  placeholder="Office Phone"
  label="Office Phone"
  type="number"
  onChange={e => this.onChange(e, 'form')}
  value={this.state.form.officePhone}
  onPaste={e => this.onPaste(e)}
/>

Answer 1

您的onPaste函数正在查看e.target.value，它需要获取的是使用从剪贴板获取的粘贴数据>e.clipboardData.getData('Text').

onPaste(e) {
  const str = e.clipboardData.getData('Text');
  const newStr = str.replace(/[+-.]/g, '');
  if (str !== newStr) {
    e.preventDefault()
  }
}