处理输入数组 -React答案

【问题标题】：Handle an array of inputs -React处理输入数组 -React
【发布时间】：2021-12-06 15:55:46
【问题描述】：

我有一个表格，我需要在其中列出输入元素。它们将有一个默认值，您可以将它们的值从最大数（默认值）更改为 0 或发送此 maxNumber。输入元素旁边是发送按钮。 Button 将从输入元素中获取值并将其发送到 API。这是我的代码的一部分：

const [valueInput,setValueInput]=React.useState(0);


         {array.map((x) => (
            <TableRow
            key={x.id}
            >
         <TableCell>{x.maxNumber}</TableCell>
               <TableCell>
              <input
                  key={x.id}
              value ={valueInput}
     
              onChange={ event => {
                 setValueInput(event.target.value);
              parseInt(event.target.value,valueInput)
               }}
              type="number"
              min="0"
              max= {x.maxNumber}
            />
                  <IconButton
                    key={x.id}
                    onClick={() => {
                      
                      team.setTeamNumber(x.id,valueInput);
                    }}>
                    <Check />
                  </IconButton>
          </TableCell>
            </TableRow>
))}

谁能帮助我如何将 valueInput 设置为 x.maxNumber - 从数组中，或者任何关于如何在没有 useState 的情况下解决这个问题的建议。

【问题讨论】：

标签： javascript reactjs input react-hooks

【解决方案1】：

您可以将带有输入的表格行放入单独的组件中，并在那里拥有输入状态。然后将行 id 和输入值传递给更改时的父组件。例如

function TableRow({ id, inputValue, onInputChange }) {
  const [inputVal, setInputVal] = React.useState(inputValue);
  
  function handleInputChange(e) {
    setInputVal(e.target.value);
    onInputChange(id, e.target.value);
  }
  
  return (
    <tr>
      <td style={{ 'border': '1px solid black' }}>{inputValue}</td>
      <td style={{ 'border': '1px solid black' }}>
        <input type="number" value={inputVal} onChange={handleInputChange} />
      </td>
    </tr>
  );
}

function Table() {
  const rowsArr = [
    { id: '123', maxNum: 1 },
    { id: '456', maxNum: 2 }
  ];
  
  function handleInputChange(inputId, inputValue) {
    console.log(`Input with id ${inputId} has value ${inputValue}`);
   
  }

  return (
    <div>
      <table style={{ 'border': '1px solid black' }}>
        <tbody>
          {rowsArr.map((x) => <TableRow key={x.id} id={x.id} inputValue={x.maxNum} onInputChange={handleInputChange} />)}
        </tbody>
      </table>
    </div>
  );
}

function App() {  
  return (
    <div>
      <Table />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

【讨论】：