Блог

Главная - Вопросы по программированию - индекс не обновляется, при этом отфильтровываются данные таблицы

индекс не обновляется, при этом отфильтровываются данные таблицы

#reactjs

#reactjs

Вопрос:

1-й столбец недоступен для редактирования, а 2-й столбец доступен для редактирования, когда пользователь выполняет поиск по любому имени и пытается отредактировать 2-й столбец, даже 2 строки доступны для редактирования, индекс не передается надлежащим образом, как я могу исправить проблему Ниже приведена ссылка, на которую я ссылаюсьhttps://codesandbox.io/s/customtablereact-forked-drnc0

чего мне здесь не хватает

пожалуйста, обратитесь к приведенному ниже фрагменту

 import React from "react";
export const CustTable = ({ columns, data, setData, search, setSearch }) => {
  const [editable, setEditable] = React.useState("");
  const cellEditable = (label) => {
    data.map((l) => {
      if (l.name === label.name) {
        setEditable(label.name);
      }
    });
  };
  const changeLastName = (name, e, index) => {
    e.persist();
    setData((prevData) => {
      return [
        ...prevData.slice(0, index),
        { name, lname: e.target.value },
        ...prevData.slice(index   1)
      ];
    });
  };
  const items = () => {
    let resultItems = data;
    if (search) {
      resultItems = data.filter((item) =>
        item.name.toLowerCase().includes(search.toLowerCase())
      );
    }

    return resultItems.map((label, index) => {
      return (
        <tr style={{ display: "flex" }} key={index}>
          <span style={{ width: "35%" }}>{label.name} </span>
          {editable === label.name ? (
            <input
              type="text"
              value={label.lname}
              onChange={(e) => changeLastName(label.name, e, index)}
            />
          ) : (
            <span onClick={() => cellEditable(label)}>{label.lname} </span>
          )}
        </tr>
      );
    });
  };

  const searchData = (e) => {
    setSearch(e.target.value);
  };

  return (
    <>
      <div>
        <input
          type="search"
          placeholder="search"
          onChange={(e) => searchData(e)}
        />
      </div>
      {items()}
    </>
  );
};

Комментарии:

1. не удалось ответить на ваш вопрос. можете ли вы объяснить больше?

2. попробуйте ссылку code sandbox и введите ‘j’ в поле поиска, отобразится соответствующая строка и щелкните по строке (редактируется только второй столбец) и отредактируйте значение, теперь 2 строки становятся редактируемыми, вместо 1 строки

Ответ №1:

вы должны проверить «уже редактируемую» переменную, как заданный удар

  let AlreadyEditable = 0;
return resultItems.map((label, index) => {
  if (editable === label.name) {
    AlreadyEditable  = 1;
  }
  return (
    <tr style={{ display: "flex" }} key={index}>
      <span style={{ width: "35%" }}>{label.name} </span>
      {AlreadyEditable < 2 amp;amp; editable === label.name ? (
        <input
          type="text"
          value={label.lname}
          onChange={(e) => changeLastName(label.name, e, index)}
        />
      ) : (
        <span onClick={() => cellEditable(label)}>{label.lname} </span>
      )}
    </tr>
  );
});