使用哈希表存储动态创建的输入行的值,当我修改某个输入框后仅输入一个字符即失去焦点。我认为解决方案可能是使用refs重新聚焦于最后一个更改的输入框,但我无法让其起作用,因为我无法确定哪个元素是最后更改的。欢迎提供解决此问题的建议。
以下代码动态创建输入框,并根据unitPriceValueHash查找它们的值。每个变量都有一个id,id被用作哈希表的键。
我创建了一个CodePen来尝试重现这个问题,但是我面临的问题在CodePen中没有显示出来。在我的实际应用程序中,例如我按下1,然后光标不再在输入框上。
以下是修改哈希值的状态更改。
以下代码动态创建输入框,并根据unitPriceValueHash查找它们的值。每个变量都有一个id,id被用作哈希表的键。
我创建了一个CodePen来尝试重现这个问题,但是我面临的问题在CodePen中没有显示出来。在我的实际应用程序中,例如我按下1,然后光标不再在输入框上。
https://codepen.io/ByteSize/pen/oogLpE?editors=1011
唯一的区别在于codepen和我的代码之间,似乎是输入框嵌套在表格中。 CreateItem(variant) {
const unitPriceValueHash = this.props.unitPriceValueHash
return {
variant_title: variant.variant_title,
variant_price: variant.variant_price,
unit_cost: <TextField
type="number"
onChange={(event) => this.handleUnitPriceChange(variant.id, event)}
key={variant.id}
value={unitPriceValueHash[variant.id] || ''}
/>
};
}
以下是修改哈希值的状态更改。
handleUnitPriceChange (id, event) {
const unitPriceValueHash = this.state.unitPriceValueHash
unitPriceValueHash[id] = event
console.log(unitPriceValueHash)
this.setState({unitPriceValueHash: unitPriceValueHash});
//this.updateVariantUnitCost(id, event);
}