Блог

Я новичок в react js, это может показаться глупым вопросом, но я не могу создать эту пустую таблицу на основе количества строк и столбцов, введенных во входном компоненте. а затем заполните эти ячейки некоторыми данными и сохраните их в переменной. вот то, что я пробовал, но не оправдал ожиданий, поскольку я не могу извлекать данные из этих ячеек таблицы https://codesandbox.io/s/brave-noether-zukhy ?file=/demo.js

ШАГ -1: сначала попробуйте сохранить отдельное состояние для каждой из ячеек таблицы

  const [tableCellsData, setTableCellsData] = useState({});
  

ШАГ -2: попробуйте получить уникальный индекс с позиции массива. я реализовал так

   const getUniqueKeyFromArrayIndex = (rowNum, columnNum) => {
    return `${rowNum}-${columnNum}`;
  };
  

ШАГ -3: прикрепите ее ко всем полям ввода с помощью свойства name

 <InputBase
      name={getUniqueKeyFromArrayIndex(i, j)}
      defaultValue="TextInput"
      Value={data}
      onChange={onChangeHandler}
/>

  

ШАГ -4: передайте вашу функцию обработчика onChange

 const onChangeHandler = (e) => {
    console.log(e.target.name, e.target.value);
    setTableCellsData({
      ...tableCellsData,
      [e.target.name]: e.target.value
    });
  };
  

ШАГ -5: вы можете проверить, все ли работает так, как вы ожидаете

   useEffect(() => {
    const keys = Object.keys(tableCellsData);
    keys.forEach((item) => {
      const indexes = item.split("-");
      console.log(
        `value of the item in index ${indexes} is  `,
        tableCellsData[item]
      );
    });
  }, [tableCellsData]);
  

вот полный пример https://codesandbox.io/s/naughty-dawn-clrl2?file=/demo.js