我正在尝试创建一个 POS 应用程序,其中单个产品可以有多个价格。因此,如果产品有多个价格,那么我会显示一个模式,但问题是我已经集成了
我正在尝试创建一个 POS 应用程序,其中单个产品可以有多个价格。因此,如果产品有多个价格,那么我会显示一个模式,但问题是我已在该模式中集成了快捷方式,但当第一次打开模式时,我想将焦点放在第一个表行上。我该怎么做?
这是我的代码
useEffect(() => {
const handleShortCut = (e) => {
const totalButtons = buttonsRef.current.length;
if (e.altKey && e.key === 'ArrowUp') {
setFocusedIndex((prevIndex) => (prevIndex - 1 + totalButtons) % totalButtons);
} else if (e.altKey && e.key === 'ArrowDown') {
setFocusedIndex((prevIndex) => (prevIndex + 1) % totalButtons);
if (focusedIndex === totalButtons - 1) {
setFocusedIndex(0); // Wrap around to the first element
}
} else if (e.key === 'Enter') {
// Trigger a click event on the focused button
const focusedButton = buttonsRef.current[focusedIndex];
if (focusedButton) {
focusedButton.click();
}
}
};
window.addEventListener("keydown", handleShortCut);
return () => {
window.removeEventListener("keydown", handleShortCut);
};
}, [focusedIndex]);
useEffect(() => {
buttonsRef.current[focusedIndex]?.focus();
buttonsRef.current.forEach((button, index) => {
if (index === focusedIndex) {
button.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
} else {
button.style.backgroundColor = '';
}
});
}, [focusedIndex]);
useEffect(() => {
console.log(2);
if (focusedIndex === 0 || focusedIndex == null) {
console.log(1);
buttonsRef.current[0]?.focus();
buttonsRef.current.forEach((button, index) => {
if (index === 0) {
button.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
} else {
button.style.backgroundColor = '';
}
});
}
}, [focusedIndex]);
表格代码
<tbody>
{multiplePrices.map((price, index) => (
<tr key={Math.random(Math.random() * Math.random())}
onClick={() => {
setProductIntoTheCart(price);
setmodal_standard(!modal_standard)
setFocusedIndex(null)
}}
ref={(el) => (buttonsRef.current[index] = el)}
>
<td>{index + 1}</td>
<td>₹ {price.price_mrp}</td>
<td>₹ {price.price_purchase}</td>
<td>₹ {price.price_sales}</td>
<td>₹ {price.price_online}</td>
</tr>
))}
</tbody>