reactjs - React onChange 不会在输入更改时更新
问题描述
我正在尝试在我的输入上使用 onChange 更新我的状态。目前,当我按下回车键时触发 onChange。我将如何在无需按 Enter 的情况下更新我的状态?
onChange(e, key) {
const re = /^[0-9\b]+$/;
if (e.target.value === "" || re.test(e.target.value)) {
this.setState({ [key]: Number(e.target.value) });
}
}
inputFigureRow(title, amount, key) {
return (
<div style={styles.benchMarkRow}>
<div style={styles.titleRow}>{title}</div>
<input
key={key}
style={styles.inputValueLeft}
value={amount}
onChange={e => this.onChange(e, key)}
/>
<div style={styles.valueRight}>${amount}</div>
</div>
);
}
renderContent() {
return (
<div style={styles.root}>
<div style={styles.benchMarkContainer}>
{this.titleRow()}
{this.inputFigureRow(
"Sales Target",
this.state.salesBenchMarkTarget,
"salesBenchMarkTarget"
)}
</div>
);
}
render({}, state) {
return this.renderContent(state);
}
解决方案
在您的输入上使用onKeyDown
处理程序而不是onChange
. 如果您需要等待最后一个字符,则需要引入一个去抖间隔,例如https://blog.flowandform.agency/debounce-in-react-fc5ed305a0e8
推荐阅读
- sparql - SPARQL Wikidata 请求字符串内容以获取人类所属的所有组织?
- python - 如何在python中将变量从一个文件导入另一个文件
- php - 控件不进入 if(isset()))
- r - 如何在 R 包中包含原始数据
- asp.net-core - BadHttpRequestException:请求内容意外结束
- sql-server - 用户在尝试连接到 Azure SQL 数据库时收到错误号 18456
- python - 将十进制转换为二进制(Python)
- node.js - 为什么我的 NodeJS lambda 函数在一次调用时执行多次?
- microsoft-graph-api - 如何将特定 Graph API 权限范围限定为特定用户或邮箱
- mpi - #pragma acc host_data use_device 的问题