当 react 输入字段中已经为不同的功能保留"onChange"时，如何避免在 react 输入字段中使用空格？

Question

我有一个带有"onChange"事件的输入字段，它使用"forEach"方法获取数组的元素，并且效果很好。但我还想在输入字段中添加一个额外的功能 - 避免输入空格。我应该如何附加此附加功能？

我试图使用"onKeyDown"事件来避免空格，但可能它给了我一个错误。下面是输入字段的代码：

主列表.js

<input
type="text"
className="form-control"
value={sprNotDeleted.value}
onKeyDown= 
{this.AttributeValidation(sprNotDeleted.value)}
onChange={this.inputChanged.bind(
this,
sprNotDeleted.id
)}
/>

输入已更改((

inputChanged = (index, e) => {
    const { sprNotDeleted } = this.state;
    sprNotDeleted.forEach(point => {
      point.value = point.id === index ? e.target.value : point.value;
    });
    this.setState({ sprNotDeleted, isEdit: false });
  };

属性验证((

 AttributeValidation(value) {
    this.setState({
      sprNotDeleted: value.replace(/s/g, "")
    });
  }

如果我使用"onKeyDown"，这是一个相应的错误： TypeError： sprNotDelete.map 不是函数

Answer 1

观察到

，对于onKeyDown，您没有将事件绑定到此事件。

onKeyDown= {this.AttributeValidation.bind( 这 sprNotDeleted.value )}

<input
    type="text"
    className="form-control"
    value={sprNotDeleted.value}
    onKeyDown= {this.AttributeValidation.bind(
    this,
    sprNotDeleted.value
    )}
    onChange={this.inputChanged.bind(
    this,
    sprNotDeleted.id
    )}
/>

当您访问此范围时，建议使用此 bind((

而不是通过onKeyDown((处理，你可以尝试使用模式正则表达式处理，因为它是一个输入类型的文本，你可以通过模式本身来处理它？

<input 
    type="text" 
    pattern="[^s]+"
/>

快乐编码！！

Answer 2

我还没有真正尝试过你的代码，但似乎你在这里有几个问题：

1. 在事件处理程序onKeyDown，直接调用函数 this.AttributeValidation，而不作为事件处理程序传递。因此，执行该函数很可能不是您想要的。

2. 执行this.AttributeValidation时，sprNotDeleted变成一个字符串而不是数组，数组在其原型中没有附加foreach方法。

这是为了建议：

onChange处理程序中，请考虑创建一个箭头函数而不是绑定该函数，因为 u 使用箭头函数来定义函数，因此不需要绑定到this。

Answer 3

您可以在输入上使用键下，对于第一个单词。 对于反应钩子

const handleKeyDown = (e) => {
    if (e.key === " " && name.length===0) {
      e.preventDefault();
    }
  };
<!-- begin snippet: js hide: false console: true babel: false -->

<input type="text" name="name" onKeyDown={handleKeyDown}/>

<input type="text" name="name" onKeyDown={handleKeydown}/>

这将首先防止空格，但之后您不能在任何句子中添加空格，因为您可以给出长度条件

Answer 4

我将其用于我的用例，

• 我有一个受控状态
• 希望用户允许键入空格/空格
• 可以验证外部事件的状态，例如单击按钮

<form action=''>
<InputComponent
  placeholder="Enter a name"
  value={folderName}
  onChange={(value) => {
    setFolderName(value);
  }}
/>;

<ButtonComponent
  variant={"primary"}
  disabled={folderName.length === 0 || folderName.trim().length === 0}
  onClick={handleClick}
>
  SAVE
</ButtonComponent>;
</form>