1

我有一个引导表，其列定义如下：

  const columns = [
    ...
    {
      dataField: "d",
      text: "Actions",
      formatter: actionFormatter,
      headerAlign: "center",
    },
  ];

格式化程序函数如下所示：

  const actionFormatter = (cell, row) => {
    return (
      <div className="action-cell text-center">
        <Tooltip title="View file">
          <span className="svg-icon svg-icon-xl" onClick={setSelectRow}>
            <SVG
              src={toAbsoluteUrl("/media/svg/icons/General/Binocular.svg")}
            />
          </span>
        </Tooltip>

        <Tooltip title="Download file">
          <span className="svg-icon svg-icon-xl">
            {/* Rename file on download */}
            <SVG
              src={toAbsoluteUrl("/media/svg/icons/Files/Download.svg")}
              onClick={setSelectRow}
            />
          </span>
        </Tooltip>
      </div>
    );
  };

第一部分用于显示其他组件中的一些内容。我需要将数据获取到父组件。但问题是格式化程序只在组件创建时创建一次，它不知道发生的任何事件或更改 row。我已经努力做到这一点，但通过做这样的事情来完成它：

  const rowEvents = {
    onClick: (e, row, rowIndex) => {
      setSelectedRow(row);
      setSelectedRowIsReady(true);
    },
  };

因此，此方法允许我通过行上的单击事件来获取选定的行，

然后，

  const setSelectRow = useCallback(() => {
    if (selectedRowIsReady) {
      props.onSelectSetting(selectedRow);
    }
  }, [props, selectedRow, selectedRowIsReady]);

  useEffect(() => {
    setSelectRow();
  }, [setSelectRow]);

setSelectRow 函数允许我将我的行发送到父组件，我必须把它放在一个 useEffect 挂钩中，因为 onClick 函数是在 rowEvents 之前调用的。

所以......不是很干净，但至少按预期工作。

现在，我想要做的是将我的格式化程序替换为如下所示：

  <div className="action-cell text-center">
    <Tooltip title="View file">
      <span className="svg-icon svg-icon-xl" onClick={setSelectRow}>
        <SVG
          src={toAbsoluteUrl("/media/svg/icons/General/Binocular.svg")}
        />
      </span>
    </Tooltip>
    <SystemFileDownload row={selectedRow} />
  </div>

但是我不知道如何将我的行放入我的子组件中，因为在调用 onClick 时，状态尚未设置。我考虑过将我选择的行设置到我的 redux 商店中，但对于我想要实现的目标来说，感觉有点矫枉过正。
我怎么能简单地将我的当前行传递给我的子组件？

我试图像这样将我的状态添加到 formatExtraData：

{
  dataField: "d",
  text: "Actions",
  formatter: actionFormatter,
  headerAlign: "center",
  formatExtraData: selectedRow,
},

然后在我的道具上使用 selectedRow ，但我的子组件获得了在前一次点击而不是在当前点击时点击的行。

所以我试图将我的行设置到我的 redux 中。Obvisouly 我遇到了同样的问题，onclick 函数是在 rowEvents 函数之前触发的。

所以我将它添加到我的子组件中：

  useEffect(
    (
      downloadFileHandler = () => {
        console.log("Download");
        // Will get the data from the API
        const fake_data = '{"hello": "no"}';
        console.log(selectedConf);
        console.log(systemName);
        const fileName = ``;
      }
    ) => {
      if (firstUpdate.current) {
        firstUpdate.current = false;
        return;
      }
      downloadFileHandler();
    },
    [selectedConf]
  );

我从我的 redux 商店获得 selectedConf 的地方，它是在单击一行时设置的。
但是，当我点击我的下载按钮时，useEffect 挂钩被触发的次数与页面上存在我的子组件一样多，即使它不是我正在处理的 BootstrapTable 的一部分，所以不好，我不知道如何避免这种情况。

我觉得我遗漏了一些明显的东西，因为我的用例非常常见和简单，我必须使用钩子和 redux 来实现它而不是简单的道具，它甚至不起作用。如果这不容易做到，这个图书馆怎么会这么有名？

谢谢。

4

0 回答 0