Блог

Пожалуйста, помогите, Есть следующий код, пожалуйста, объясните, как я могу отредактировать конкретную ячейку, то есть показать ввод вместо td для редактируемой ячейки, пытаюсь реализовать это, но вместо этого получаю редактирование всего столбца, мне нужно показывать пользовательский ввод в TableCell вместо ячейки таблицы, когда они нажимают значок редактирования здесь ссылка на CodeSandboxhttps://codesandbox.io/s/busy-keller-331p2?file=/src/App.js

  import React from "react";
    
    export default class CatalogReviewerComponent extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          data: {
            content: [
              {
                id: 1,
                "test 1": "11",
                "test 2": "22",
                formId: "5f36674f5d45f33adcf75115"
              },
              {
                id: 2,
                "test 1": "test",
                "test 2": " test 242",
                formId: "5f36674f5d45f33adcf75115"
              }
            ]
          }
        };
      }
    
      onBlurAndUpdate = (e) => {
        console.log(e.target);
      };
    
      render() {
        return !!this.state.data ? (
          <>
            <TableTemplate
              onBlurAndUpdate={this.onBlurAndUpdate}
              data={this.state.data}
            />
          </>
        ) : (
          ""
        );
      }
    }
    
    const TableTemplate = ({ data, onBlurAndUpdate }) => {
      let head = data.content.map((el) => Object.keys(el))[0];
      let body = data.content.map((el) => Object.values(el));
    
      return (
        <table className="table table-bordered">
          <TableHead head={head} />
          <tbody>
            {body.map((el, i) => (
              <TableRow
                key={i}
                onBlurAndUpdate={onBlurAndUpdate}
                head={head}
                body={el}
              />
            ))}
          </tbody>
        </table>
      );
    };
    
    const TableHead = ({ head }) => {
      return (
        <thead>
          <tr>
            {head.map((el, i) => (
              <th key={i} scope="col" style={{ border: "2px solid red" }}>
                {el}
              </th>
            ))}
          </tr>
        </thead>
      );
    };
    
    const TableRow = ({ body, head, onBlurAndUpdate }) => {
      return (
        <tr>
          {body.map((el, i) => (
            <TableCell
              key={i}
              onBlurAndUpdate={onBlurAndUpdate}
              data={el}
              index={i}
              head={head}
            />
          ))}
        </tr>
      );
    };
    
    const TableCell = ({ data, index, head, onBlurAndUpdate }) => {
      return (
        <>
          {head[index] !== "id" amp;amp; head[index] !== "formId" ? (
            <td
              key={index}
              style={{ position: "relative", border: "2px solid green" }}
              onClick={(e) => onBlurAndUpdate(e)}
            >
              {data}
              <i
                className={"fas fa-pencil-alt"}
                style={{
                  position: "absolute",
                  right: "10px",
                  border: "2px solid green"
                }}
              />
            </td>
          ) : (
            <td key={index} style={{ border: "2px solid green" }}>
              {data}
            </td>
          )}
        </>
      );
    };
  

Может быть, есть какой-нибудь хороший способ сделать это

Я думаю, вы можете просто добавить идентификатор в td, идентификатор будет равен

 id=`cell_${index}` 
  

например, чтобы вы были уверены, что каждый идентификатор уникален, и тогда вы можете получить доступ к каждой ячейке без проблем, выполнив getElementById (идентификатор), а затем изменить все, что вы хотите в td или его дочерних элементах