当"onChange“已经为不同的函数保留时，如何避免在function输入字段中使用空白？
当"onChange“已经为不同的函数保留时，如何避免在function输入字段中使用空白？
提问于 2019-07-23 03:04:34
我有一个带有"onChange“事件的输入字段，它用"forEach”方法获取数组的元素，并且工作得很好。但是我也想在输入字段中添加一个额外的特性--避免输入空格。我应该如何附加这个附加功能？
我试图使用"onKeyDown“事件来避免空白，但可能会给我带来一个错误。下面是输入字段的代码：
mainList.js
<input
type="text"
className="form-control"
value={sprNotDeleted.value}
onKeyDown=
{this.AttributeValidation(sprNotDeleted.value)}
onChange={this.inputChanged.bind(
this,
sprNotDeleted.id
)}
/>inputChanged()
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()
AttributeValidation(value) {
this.setState({
sprNotDeleted: value.replace(/\s/g, "")
});
}如果我使用"onKeyDown"：TypeError: sprNotDeleted.map不是一个函数，这里有一个相应的错误
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-07-23 03:23:39
注意到，对于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()进行处理不同，您能否尝试使用模式regex处理作为输入类型文本，您可以通过模式本身来处理它吗？
<input
type="text"
pattern="[^\s]+"
/>编码愉快！！
Stack Overflow用户
发布于 2019-07-23 03:25:39
我还没有真正尝试过您的代码，但是在这里您似乎有几个问题：
- 在
onKeyDown事件处理程序中，函数this.AttributeValidation被直接调用，而不作为事件处理程序传递。所以这个函数被执行，这很可能不是你想要的。 - 当
this.AttributeValidation被执行时，sprNotDeleted变成了一个字符串，而不是一个数组，它的原型中没有附加foreach方法。
以下是建议：
在onChange处理程序中，考虑创建箭头函数，而不是绑定函数，因为您使用箭头函数来定义函数，因此没有必要绑定到this。
Stack Overflow用户
发布于 2021-02-01 12:04:44
您可以在输入时使用按键，作为第一个单词。反应钩
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}/>这将防止第一次出现空格，但之后不能在任何句子中添加空格，因为您可以给出长度条件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57156099
复制相关文章
相似问题
腾讯云开发者
