处理一组输入 -React

Question

我有一个 table，我需要在其中列出输入元素。它们将有一个默认值，您可以将它们的值从最大数量（默认值）更改为 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 的情况下解决这个问题的建议。

Answer 1

您可以将带有输入的 table 行放入一个单独的组件中，并在那里设置输入状态。然后将行 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>

处理一组输入 -React

Handle an array of inputs -React

javascript

input

reactjs

react-hooks