在行点击时触发antd表中的单选按钮onChange或onSelect？

Question

我正在尝试在单击时选择 antd 表行... 我设法在单击该行时设置了“selectedRowKeys”......并且该行被选中

<Table onRow={(record: any, rowIndex: number) => ({
      onClick: () => {
        setSelectedKeys([record.key]);
      },}...

问题是“rowSelection”对象的 onChange 和 onSelect 在行单击时没有触发（仅在直接单选按钮选择时）...我做错了吗？！

 const rowSelection = {
selectedRowKeys: selectedKeys,
onSelect: (record: T, selected: boolean) => {console.log("on select");},
onChange:.....

沙盒： https://codesandbox.io/s/row-selection-events-not-firing-in-antd-table-zus9x

Answer 1

我刚刚在 onRow>onClick 中添加了 console.logs，如果我使用此代码：

console.log(selectedKeys);
  return (
    <Table
      rowSelection={{
        type: "radio",
        ...myRowSelection
      }}
      columns={myColumns}
      dataSource={data}
      onRow={(record, rowIndex) => ({
        onClick: () => {
          console.log("Row onclick");
          console.log(record);
          setSelectedKeys([record.key]);
        }
      })}
    />
  );

然后似乎正在调用您的行 onclick 并且它正在设置正确的选定键。它也在选择正确的行。

以下代码仅引用单选按钮，因此仅受单选按钮 onSelect 和 onChange 影响

const myRowSelection = {
    selectedRowKeys: selectedKeys,
    onSelect: (record, selected) => {
      console.log(record);
    },
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    }
  };

请参见此处是您将该代码链接到单选按钮的位置

rowSelection={{
        type: "radio",
        ...myRowSelection
      }}

如果您想通过选择一行来触发 onChange，我建议您在 onRow onClick 中调用 onChange() 函数，如下所示：

onRow={(record, rowIndex) => ({
        onClick: () => {
             //CALL THE ONCHANGE FUNCTION HERE AND IT WILL BE TRIGGERED ON ROW SELECTION
             onChange([record.key]);
             //and then do whatever you want in the onChange function
        }
      })}