如何在使用 react-table 或 react-table-6 时执行内联编辑？

Question

我正在尝试使用 react-table-6 库在 React 中执行 CRUD 操作，因为它轻量级并且具有基本功能。我不希望我的捆绑包尺寸更大。

这是我的代码https://codesandbox.io/s/crud-using-react-table-6-rs2r9

每当我尝试使用输入编辑和更改值时，表格都会重新呈现。我认为问题在于，当我更改状态时，列内的单元格会重新呈现。但我无法为此找到解决方法。任何帮助将不胜感激。谢谢。

Answer 1

我做了一些实验，发现 react-table-6 库不支持 input 元素。

但是使用 contentEditable div，它似乎可以完美地工作。

带输入的代码

import React from "react";
import "./styles.css";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";

export default function App() {
  const [state, setState] = React.useState({
    data: [
      {
        name: "Adam",
        age: 20
      },
      {
        name: "Eve",
        age: 19
      },
      {
        name: "Abel",
        age: 4
      },
      {
        name: "Coin",
        age: 5
      }
    ],
    edit: {}
  });

  return (
      <ReactTable
        data={state.data}
        columns={[
          {
            Header: "Name",
            accessor: "name",
            Cell: ({ value, ...props }) =>
              state.edit.name === props.original.name ? (
                <input
                  value={state.edit.name}
                  onChange={(e) => {
                    console.log(e.target.value);
                    setState({
                      ...state,
                      edit: { ...state.edit, name: e.target.value }
                    });
                  }}
                />
              ) : (
                value
              )
          },
          {
            Header: "Age",
            accessor: "age"
          },
          {
            Cell: ({ value, ...props }) =>
              Object.keys(state.edit).length > 0 &&
              state.edit.name === props.original.name ? (
                <button>Save</button>
              ) : (
                <button
                  onClick={(e) => setState({ ...state, edit: props.original })}
                >
                  Edit
                </button>
              )
          }
        ]}
      />
  );
}

带有内容可编辑 div 的代码

import React from "react";
import "./styles.css";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";

export default function App() {
  const [state, setState] = React.useState({
    data: [
      { id: 1, name: "Adam", age: 20 },
      { id: 2, name: "Eve", age: 19 },
      { id: 3, name: "Abel", age: 4 },
      { id: 4, name: "Coin", age: 5 }
    ],
    edit: {}
  });

  return (
    <ReactTable
      data={state.data}
      columns={[
        {
          Header: "Name",
          accessor: "name",
          Cell: ({ value, ...props }) => (
            <div
              style={
                state.edit.id === props.original.id
                  ? {
                      backgroundColor: "#ddd",
                      padding: "5px",
                      outline: "1px solid #0000ff"
                    }
                  : {}
              }
              contentEditable={state.edit.id === props.original.id}
              suppressContentEditableWarning
              onBlur={(e) => {
                setState({
                  ...state,
                  edit: { ...state.edit, name: e.target.innerHTML }
                });
              }}
              dangerouslySetInnerHTML={{
                __html:
                  state.edit.id === props.original.id ? state.edit.name : value
              }}
            />
          )
        },
        {
          Header: "Age",
          accessor: "age"
        },
        {
          Cell: ({ value, ...props }) =>
            Object.keys(state.edit).length > 0 &&
            state.edit.id === props.original.id ? (
              <button
                onClick={(e) => {
                  let newdata = state.data;
                  newdata.map((d) => {
                    if (d.id === state.edit.id) {
                      d.name = state.edit.name;
                    }
                    return d;
                  });
                  console.log(newdata);
                  setState({ ...state, data: newdata, edit: {} });
                }}
              >
                Save
              </button>
            ) : (
              <button
                onClick={(e) => setState({ ...state, edit: props.original })}
              >
                Edit
              </button>
            )
        }
      ]}
      defaultPageSize={5}
    />
  );
}