如何在 React-Table 中添加新的可编辑行？

Question

我正在使用 React-Table 构建一个动态表，我想添加一行新的可编辑单元格。\n目前我可以添加新行，但只有当我按下全局编辑按钮时我才能编辑它，而不是我想要首先添加一行可编辑的行。\n这是我的代码 -

\n

主要成分

\n

function StyledTable() {\n  useEffect(() => {\n    dispatch(getData(mokeJsonData));\n  }, []);\n  const [datatoColumns] = useState(columnDataaa.slice(1));\n  const [skipPageReset, setSkipPageReset] = useState(false);\n  const data = useSelector((state) => state.dataReducer.data);\n  const dispatch = useDispatch();\n\n  const columns = useMemo( \n    () => [\n      {\n        Header: "",\n        id: "expander", \n        Cell2: ({ row }) => { \n          return (\n            <span {...row.getToggleRowExpandedProps()}>  \n              {row.isExpanded ? "-" : "+"}\n            </span>\n          );\n        },\n        Cell: () => {\n          return <div></div>;\n        },\n      },\n      {\n        Header: columnDataaa[0].Header,\n        accessor: columnDataaa[0].accessor,\n        Cell: ({ value, row }) => {\n          return (\n            <FlexDiv>\n              <HighlightOffIcon\n                style={{ marginRight: "5px", color: "grey", width: "20px" }}\n                onClick={() => dispatch(deleteRow(row.index))}\n              />\n              {value}\n            </FlexDiv>\n          );\n        },\n      },\n      ...datatoColumns,\n    ],\n    []\n  );\n\n  useEffect(() => {\n    setSkipPageReset(false);\n  }, [data]);\n\n  const renderRowSubComponent = useCallback(\n    ({ row }) => ({\n      values: row.original.addInfo && row.original.addInfo,\n    }),\n    []\n  );\n  return (\n    <Styles>\n      <h1>\xd7\x94\xd7\x92\xd7\x93\xd7\xa8\xd7\xaa \xd7\x9e\xd7\xa0\xd7\x94\xd7\x9c</h1>\n      <Table\n        columns={columns}\n        skipPageReset={skipPageReset}\n        renderRowSubComponent={renderRowSubComponent}\n      />\n    </Styles>\n  );\n}\n\nexport default StyledTable;\n\n

\n

可编辑单元格

\n

const EditableCell = ({\n  value: initialValue,\n  row: { index },\n  column: { id, editable, type, width, valueOptions },\n}) => {\n  const [value, setValue] = useState(initialValue);\n\n  const onChange = (e) => {\n    setValue(e.target.value);\n  };\n  const dispatch = useDispatch();\n\n  const onBlur = () => {\n    if (value === "") return alert("requiredddd");\n    return dispatch(updateMyData({ index, id, value }));\n  };\n\n  useEffect(() => {\n    setValue(initialValue);\n  }, [initialValue]); \n\n  if (type === "singleSelect")\n    return (\n      <InputSelect\n        value={value}\n        onChange={onChange}\n        onBlur={onBlur}\n        style={{ width: width }}\n      >\n        {valueOptions.map((item, i) => {\n          return (\n            <option value={item.label} key={i}>\n              {item.label}\n            </option>\n          );\n        })}\n      </InputSelect>\n    );\n  if (type === "date")\n    return (\n      <DatePicker\n        style={{ width: width }}\n        type="date"\n        disabled={editable === false}\n        value={value}\n        onChange={onChange}\n        onBlur={onBlur}\n      />\n    );\n  return (\n    <input\n      style={{ width: width }}\n      disabled={editable === false}\n      value={value}\n      onChange={onChange}\n      onBlur={onBlur}\n    />\n  );\n};\n\nexport default EditableCell;\n

\n

添加行功能

\n

 addRow: (state, action) => {\n      const obj = {};\n      action.payload.slice(1).forEach((item) => {\n        obj[item.accessor] = '';\n      });\n      if (\n        obj &&\n        Object.keys(obj).length === 0 &&\n        Object.getPrototypeOf(obj) === Object.prototype\n      )\n        return;\n      else {\n        state.data.splice(0, 0, obj);\n        state.originalData = state.data;\n      }\n    },\n\n

\n

谢谢

\n

Answer 1

将状态变量和方法传递给 useTable() 根挂钩。自定义插件挂钩和其他维护组件状态的变量/方法从表实例返回。您稍后可以从任何您想要的地方检索这些。

const {
    // all your hooks...
  } = useTable(
    {
      columns,
      data,
      // all your other hooks...
      updateMyData,
      // pass state variables so that we can access them in edit hook later
      editableRowIndex, // index of the single row we want to edit 
      setEditableRowIndex // setState hook for toggling edit on/off switch
    },
    // other hooks... 
    (hooks) => {
      hooks.allColumns.push((columns) => [
        // other hooks such as selection hook
        ...columns,
        // edit hook
        {
          accessor: "edit",
          id: "edit",
          Header: "edit",
          Cell: ({ row, setEditableRowIndex, editableRowIndex }) => (
            <button
              className="action-button"
              onClick={() => {
                const currentIndex = row.index;
                if (editableRowIndex !== currentIndex) {
                  // row requested for edit access
                  setEditableRowIndex(currentIndex);
                } else {
                  // request for saving the updated row
                  setEditableRowIndex(null); // keep the row closed for edit after we finish updating it
                  const updatedRow = row.values;
                  console.log("updated row values:");
                  console.log(updatedRow);
                  // call your updateRow API
                }
              }}
            >
              {/* single action button supporting 2 modes */}
              {editableRowIndex !== row.index ? "Edit" : "Save"}
            </button>
          )
        }
      ]);
    }
  );

您可以从下面的链接找到示例

github 仓库链接：https://github.com/smmziaul/only-one-row-editable

代码沙箱链接：https://codesandbox.io/s/github/smmziaul/only-one-row-editable