bounty将在3天后过期。回答此问题可获得+50声望奖励。Xkoder FX希望引起更多人关注此问题。

我正在使用React-Table构建一个动态表，我想添加一个新的可编辑单元格行。目前我可以添加新行，但只有当我按下全局编辑按钮时，我才可以编辑它，相反，我想添加一个行，这将是可编辑的第一。这是我的代码-
主要成分

function StyledTable() {
  useEffect(() => {
    dispatch(getData(mokeJsonData));
  }, []);
  const [datatoColumns] = useState(columnDataaa.slice(1));
  const [skipPageReset, setSkipPageReset] = useState(false);
  const data = useSelector((state) => state.dataReducer.data);
  const dispatch = useDispatch();

  const columns = useMemo( 
    () => [
      {
        Header: "",
        id: "expander", 
        Cell2: ({ row }) => { 
          return (
            <span {...row.getToggleRowExpandedProps()}>  
              {row.isExpanded ? "-" : "+"}
            </span>
          );
        },
        Cell: () => {
          return <div></div>;
        },
      },
      {
        Header: columnDataaa[0].Header,
        accessor: columnDataaa[0].accessor,
        Cell: ({ value, row }) => {
          return (
            <FlexDiv>
              <HighlightOffIcon
                style={{ marginRight: "5px", color: "grey", width: "20px" }}
                onClick={() => dispatch(deleteRow(row.index))}
              />
              {value}
            </FlexDiv>
          );
        },
      },
      ...datatoColumns,
    ],
    []
  );

  useEffect(() => {
    setSkipPageReset(false);
  }, [data]);

  const renderRowSubComponent = useCallback(
    ({ row }) => ({
      values: row.original.addInfo && row.original.addInfo,
    }),
    []
  );
  return (
    <Styles>
      <h1>הגדרת מנהל</h1>
      <Table
        columns={columns}
        skipPageReset={skipPageReset}
        renderRowSubComponent={renderRowSubComponent}
      />
    </Styles>
  );
}

export default StyledTable;

可编辑单元格

const EditableCell = ({
  value: initialValue,
  row: { index },
  column: { id, editable, type, width, valueOptions },
}) => {
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => {
    setValue(e.target.value);
  };
  const dispatch = useDispatch();

  const onBlur = () => {
    if (value === "") return alert("requiredddd");
    return dispatch(updateMyData({ index, id, value }));
  };

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]); 

  if (type === "singleSelect")
    return (
      <InputSelect
        value={value}
        onChange={onChange}
        onBlur={onBlur}
        style={{ width: width }}
      >
        {valueOptions.map((item, i) => {
          return (
            <option value={item.label} key={i}>
              {item.label}
            </option>
          );
        })}
      </InputSelect>
    );
  if (type === "date")
    return (
      <DatePicker
        style={{ width: width }}
        type="date"
        disabled={editable === false}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
      />
    );
  return (
    <input
      style={{ width: width }}
      disabled={editable === false}
      value={value}
      onChange={onChange}
      onBlur={onBlur}
    />
  );
};

export default EditableCell;

添加行函数

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

型
谢谢