如何使用react挂钩更新当前数组中的特定值?

时间:2019-12-22 07:35:18

标签: javascript arrays reactjs react-hooks

源代码为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。
这里的输入值表示座椅阵列的连续索引。
我不确定该怎么做。

0 个答案:

没有答案