我一直在处理的是文本 input
缩小<option>
在<select>
作为用户类型。它正在工作,但我现在关心的是安全性,用户传递给 input
的内容,以及潜在的恶意条目。
我想我可以做类似 <input placeholder='[a-zA-Z]' />
的事情但它仍然允许在文本框中输入其他字符。
我在这里做错了什么,有什么替代方案可以只允许输入字母数字?
onInputChange(term) {
this.setState({ term });
}
renderOptionsSelect(term) {
return _.map(this.props.pos_list, p => {
var searchTerm = this.state.term.toLowerCase();
if (p.pos_code.toLowerCase().match(searchTerm)) {
return (
<option key={p.pos_code} value={p.pos_code}>{p.pos_code}</option>
);
}
});
}
// render the main element of the container
render() {
return (
<div className='panel panel-default'>
<div className='panel-heading'>
<h4><strong>Basic Query</strong></h4>
</div>
<div className='panel-body'>
<input
pattern='[a-zA-Z]'
className='form-control'
placeholder='Enter Keyword or Position Code'
value={this.state.term}
onChange={event => this.onInputChange(event.target.value)}
/>
<hr />
<h4>Position:</h4>
<select className='form-control'>
<option></option>
{this.renderOptionsSelect()}
</select>
<br />
<h4>Data Cut:</h4>
<select className='form-control' disabled={true} />
</div>
</div>
);
}
最佳答案
这很简单。你:
- 删除模式属性。
- 为
input
事件而不是change
事件注册您的onInputChange
方法(onInput={event => this.onInputChange(event .target.value)}
). - 在更改状态之前清除
onInputChange
中接收到的值。
关于javascript - 输入模式 ='[a-zA-Z]' 在 React 应用程序中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48233264/