我们在一个React组件中有一个input ，如下图：
export const InputWithNoSpaces = () => (
<label>
Enter anything but a space
<input type="text" />
</label>
);
我们想阻止用户在input 中输入空格。
我们可以使用输入的 pattern属性，在用户输入后对输入的值进行验证。然而，我们想在用户输入数值时做一些事情，以阻止空格进入input 。
这里是我们的第一次尝试：
export const InputWithNoSpaces = () => {
const handleKeyDown = e => {
if (e.key === " ") {
e.preventDefault();
}
};
return (
<label>
Enter anything but a space
<input
type="text"
onKeyDown={handleKeyDown}
/>
</label>
);
};
所以，我们处理这个 keydown事件并检查用户是否输入了空格。 event.key.请注意，event.key 比老式的event.keyCode 或event.which 要好，后者都已经被废弃了。
我们使用 event.preventDefault来取消事件，如果已经输入了空格。这意味着空格不会进入输入的值。
我们可以使用同样的方法，处理 keyup事件而不是keydown 。
如果我们在input 中输入 "The cat sat on the mat"，我们的结果是 "Thecatsatonthemat"。很好!
如果我们在剪贴板中输入 "The cat sat on the mat "并将其粘贴到input ，会发生什么情况？ 好吧，这将绕过handleKeyDown 中的检查，意味着一个空格将进入我们的input 。
让我们在事件管道中稍后使用change 事件来处理这种情况：
export const InputWithNoSpaces = () => {
...
const handleChange = e => { if (e.currentTarget.value.includes(" ")) { e.currentTarget.value = e.currentTarget.value.replace(/\s/g, ""); } }; return (
<label>
Enter anything but a space
<input type="text" onKeyDown={handleKeyDown} onChange={handleChange} />
</label> );
};
因此，我们使用字符串的 includes方法检查新值是否包含空格。如果它确实包含空格，我们就使用字符串的replace 方法来替换值中的所有空格。注意，我们在replace 的第一个参数中使用了带有全局标志的正则表达式，这样所有的空格都被替换了。然后我们用修改后的值来更新这个值。
如果我们现在从剪贴板上粘贴 "The cat sat on the mat "到input ，我们最终得到的是 "Thecatsatonthemat"。很好!
我们可以删除keydown 处理程序，因为change 处理程序将捕捉用户在input 中按下空格键的情况。
下面是一个实现的链接。我在例子中保留了keydown 和change 两个处理程序。
