javascript - ReactJS - 无法将用户输入限制为仅字母

Question

我试图将用户输入限制为仅字母，但由于某种原因它不起作用。我对 ReactJS 很陌生，所以也许我的问题出在某个地方。这是我到目前为止所得到的:

return (
    <input type="text" pattern="[a-zA-Z]*" placeholder="Add Skill" onChange={this.updateField} />
)

type="text"和模式在这种情况下似乎不起作用。

提前致谢!

Answer 1

pattern 属性用于在提交时检查输入值。

引用号:https://www.w3schools.com/tags/att_input_pattern.asp

<小时/>

要限制用户只能输入字母，您可以使用onKeyPress

<input
    type="text"
    onKeyPress={event => (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122)}
    placeholder="Add Skill"
    onChange={this.updateField}
/>

这是 ASCII 表:http://www.asciitable.com/

<小时/>

更新 1

代码笔:https://codepen.io/jeemok/pen/rqJaog

更新 2:charCode 已弃用

key 返回键入的字符，因此我们可以检查将 key 转换为数字是否返回 NaN:

onKeyPress(event) {
  return (isNaN(Number(event.key));
}