Question

我正试图阻止我的TextInput获得类似$,%,^,&,(,) etc的值。基本上我的TextInput应该只允许字母。我的方法如下。但是我仍然可以输入其他字符。如何防止TextInput中出现特殊字符

restrict(event) {
        const regex = new RegExp("^[a-zA-Z]+$");
        const key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    }

                         <TextInput
                                underlineColorAndroid='transparent'
                                allowFontScaling={false}
                                style={styles.questionText}
                                onKeyPress={e => this.restrict(e)}
                                value={firstNameState}
                            />

Answer 1

android上的onKeyPress事件不能很好地工作。

这就是为什么我选择使用一种方法来消除这些字符，然后将其保存在所需的位置，就像它可能会更改字段状态一样。

restrict = text => text.replace(/[`~0-9!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '')

Answer 2

您可以使用正则表达式定义OnChange事件处理程序，在此处将检查输入字符串是否与/^[a-zA-Z]+$/.test(text)相匹配的正则表达式：

const {useState} = React;

const App = () => {
  const [value, setValue] = useState("");
  const onChange = e => {
    const input = e.currentTarget.value;
    if (/^[a-zA-Z]+$/.test(input) || input === "") {
      setValue(input);
    }
  };
  return (
    <div className="App">
      <input
        value={value}
        onChange={onChange}
        underlineColorAndroid='transparent'
        allowFontScaling={false}
      />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

限制reactNative TextInput中的特殊字符

2 个答案: