如何改变所选单元格的颜色,因为我们按键盘箭头键(右,左,上,下),即改变活动单元格,因为我们按下的键
function App() {
const [inrows, setInrows] = useState(0)
const [incols, setIncols] = useState(0)
const [rows, setRows] = useState(Array(0).fill(null));
const [columns, setColumns] = useState(Array(0).fill(null));
function generateBox() {
setRows(Array(inrows).fill(null));
setColumns(Array(incols).fill(null));
}
return (
<div className="container">
<h2>Box Generator</h2>
<label htmlFor="row">Enter Rows: </label> <input type="number" name="row" placeholder="Enter Rows" onChange={(e) => setInrows(parseInt(e.target.value))} value={inrows} />
<label htmlFor="column">Enter Columns: </label><input type="number" name="column" placeholder="Enter Columns" onChange={(e) => setIncols(parseInt(e.target.value))} value={incols} />
<button onClick={generateBox}>Go</button>
<div className="box-container">
<table>
{
rows.map((e,i) => {
return <tr>
{columns.map((eve,idx) => {return <td></td>})}
</tr>
})
}
</table>
</div>
</div>
);
}```
1条答案
按热度按时间w6lpcovy1#
使用状态变量来跟踪活动单元格,并使用CSS来样式化活动单元格。您可以向表中添加事件侦听器来检测键盘箭头键的按下,并相应地更新活动单元格。
请注意,您需要将tabIndex={0}添加到表中,并使用onKeyDown而不是onClick来处理键盘事件。此外,您需要为活动单元格定义CSS类。