我正在构建一个 ReactJS 搜索组件，用于通过搜索进行数据过滤。
这个想法是，用户输入一个单词，一个字母一个字母，系统将过滤包含该单词的所有寄存器。基本组件详述如下:
class SearchInput extends Component {
static propTypes = {
onKeyUp: PropTypes.func,
placeHolder: PropTypes.string,
value: PropTypes.string
};
state = {
searchText: ""
};
handleKeyUp = event => {
console.log(event.target.value) // <== No result. Always empty
let newSearchText = event.target.value;
this.setState({ searchText: newSearchText });
if (this.props.onKeyUp) this.props.onKeyUp(newSearchText);
};
render() {
console.log(this.state.searchText) // <== Always empty
return (
<div className="search-input">
<div className="search-input-icon">
<Icon name="faSearch" />
</div>
<input
autoFocus="true"
type="text"
onKeyUp={this.handleKeyUp}
placeholder={this.props.placeHolder}
value={this.state.searchText}
/>
</div>
);
}
我没有在 handleKeyUp 事件处理程序中获取按键值。
如果我从代码中省略 value={this.state.searchText} (不受控制)，它就会起作用，但我需要一种从外部设置 searchText 的方法组件(初始化、其他组件选择等)。
为什么我无法在处理程序中获取 event.target.value 数据？如何解决？
最佳答案
我很确定您必须监听输入字段上的 onChange 事件才能获取更新的目标值。只需更改
<input onKeyUp={this.handleKeyUp} />
至
<input onChange={this.handleKeyUp} />
关于javascript - ReactJS OnKeyUp 事件未在受控输入上获取值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55801893/