源代码为here。
import React, { useState } from "react";
import ReactDOM from "react-dom";
function App() {
const [seat_array, setSeat_array] = useState(
[
[0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0, 0]
]
);
const [current_input, setCurrent_input] = useState(1)
const onChangeHandle = (e) => {
setCurrent_input(e.target.value)
}
const getTotalSeats = () => {
let totalSeats = 0
seat_array.forEach((e, i, a) => {
totalSeats += e.length;
})
return totalSeats
}
return (
<div className="App">
<h3>
Total rows: {seat_array.length}
</h3>
<h3>
Total seats: { getTotalSeats() }
</h3>
<h3>
Seat booking status:
<p>
{
seat_array.map((val, i) => {
return val+' | '
})
}
</p>
</h3>
<h3>
Your current input:{ current_input }
</h3>
<input
type="number"
min="1"
max={getTotalSeats()}
value={current_input}
onChange={onChangeHandle}
>
</input>
<button
onClick={() => {
// I want to update the seat value corresponding of current input in the seat array to 1
}}
>
select
</button>
<button
onClick={() => {
// I want to update the seat value corresponding of current input in the seat array to 0
}}
>
cancel
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我要做的是根据输入值更新特定值。
当我单击“选择”按钮时,我想将座位阵列中的相应值设置为1,而当我单击“取消”按钮时,将其设置为0。
这里的输入值表示座椅阵列的连续索引。
我不确定该怎么做。