技術標籤：前端工作問題整理javascripthtml5reactjs正則表示式typescript

背景：react + antd
目標：通過正則來控制input只能輸入某類字元：

	state={
		name:""
	}
	handleNameChange = v => {
        this.setState({ name: v.target.value });//*1:input的value發生改變時，將state中的name設定為改變後的值
    };

1. 定義一個過濾方法，以只允許輸入中英文為例：

	filterName = (value = ""
 
) => {
	    return value.trim().replace(/[^a-zA-Z\u4e00-\u9fa5]/g,"");
	};

2. 在input元素中控制value：

	<Input
	 maxLength={10} //長度限制可以通過maxLength屬性簡單的實現
	 placeholder="請輸入"
	 value={this.filterName(this.state.name).trim()}//*2 將value指定為state中的name
	
	 onChange={this.handleNameChange}
	/>
 

題外話：通過* 1 和 * 2 ，就實現了react中 input 值 的雙向繫結

一個值得注意的問題：由於只允許輸入中文和英文，所以空格也是不被允許輸入的，我們的輸入法在輸入連續的中文時，將詞語中間自動識別為空格，所以導致不能輸入連續的中文，只能一個字一個字的輸入。關於這個問題的解決辦法：

	filterName = (value = "") => {
	    return value.trim().replace(/[^a-zA-Z\u4e00-\u9fa5/s]/g,"");
	};

在正則匹配後面加了一個/s，代價是允許輸入空格。如果需要這麼做，可以考慮在後續提交表單時過濾掉所有的空格。

斟酌了一下還是隻允許輸入單字更方便，主要看產品能否接受。