为什么 <input type='number' value={var_name}> 会替换表中的所有值？

Question

我正在尝试在表格中绘制出许多元素，并且每个元素都有一个特定的值。每当我使用 value={inputArrival} 或 value={inputBurst} 时，特定列的所有值都会更新。我附上截图。如何解决这个问题？ Screenshot of what's happening

import React,{useState} from 'react';
import './tableEdit.css';
const EntryTable = (props) => {
    const entry=props.numOfEntries;
    const[inputArrival,SetinputArrival]=useState('');
    const[inputBurst,SetinputBurst]=useState('');
 
    function changeArrival(e)
    {
       
           
        console.log(e.target.value+"A");
        /*
        if(!Number(e.target.value))
       return;
        else*/
        SetinputArrival(e.target.value);
    }
    function changeBurst(e)
    {
        console.log(e.target.value+"B"); 
        SetinputBurst(e.target.value);
     
    }

   
   // console.log(entry);
    var ArrayEntry=[];
    for(var i=1;i<=entry;i++)
    ArrayEntry.push( <tr key={i}>                       
        <td className='row_editContent' >P{i}</td>
        <td className='row_editContent'><input className='input_edit' placeholder='0' type='number' value={inputArrival} onChange={(e)=>changeArrival(e)}></input>ms</td>
        <td className='row_editContent'><input  className='input_edit' placeholder='0' type='number' value={inputBurst} onChange={(e)=>changeBurst(e)}></input>ms</td>
        </tr>);

        return (
        <div>
            <table className='MainTableContainer' >
                <thead>
                    <tr >
                        <th className='row_editHeading'>Process</th>
                        <th className='row_editHeading'>Arrival Time</th>
                        <th className='row_editHeading'>Burst Time</th>
                    </tr>
                </thead>
                <tbody> 
                    {ArrayEntry}
                </tbody>
            </table>
        </div>
    )
}

export default EntryTable

Answer 1

您对表中的每个数据行条目使用相同的单个状态 inputArrival 和 inputBurst。更新，所以每个都是一个字符串数组，并更新 changeArrival 和 changeBurst 回调来咖喱一个索引来更新。使用映射索引访问正确的状态并传递给onChange 回调。

const EntryTable = (props) => {
  const entry = props.numOfEntries;
  const [inputArrival, setInputArrival] = useState(Array(entry).fill(""));
  const [inputBurst, setInputBurst] = useState(Array(entry).fill(""));

  function changeArrival(index) {
    return (e) => {
      console.log(e.target.value + "A");
      setInputArrival((values) =>
        values.map((value, i) => (i === index ? e.target.value : value))
      );
    };
  }
  function changeBurst(index) {
    return (e) => {
      console.log(e.target.value + "B");
      setInputBurst((values) =>
        values.map((value, i) => (i === index ? e.target.value : value))
      );
    };
  }

  // console.log(entry);
  const ArrayEntry = Array.from({ length: entry}).map((_, i) => (
    <tr key={i}>
        <td className="row_editContent">P{i}</td>
        <td className="row_editContent">
          <input
            className="input_edit"
            placeholder="0"
            type="number"
            value={inputArrival[i]}
            onChange={changeArrival(i)}
          />
          ms
        </td>
        <td className="row_editContent">
          <input
            className="input_edit"
            placeholder="0"
            type="number"
            value={inputBurst[i]}
            onChange={changeBurst(i)}
          />
          ms
        </td>
      </tr>
  ));

  return (
    <div>
      <table className="MainTableContainer">
        <thead>
          <tr>
            <th className="row_editHeading">Process</th>
            <th className="row_editHeading">Arrival Time</th>
            <th className="row_editHeading">Burst Time</th>
          </tr>
        </thead>
        <tbody>{ArrayEntry}</tbody>
      </table>
    </div>
  );
};