在antd表中選擇行時，復選框未簽入反應

Question

我正在使用antd表在表中查看表格式的數據。 我已經使用rowSelection選擇行。

單擊復選框列時，未設置復選框，但事件正在生成。

class AppUser extends Component {
  state = {
    mockTableData: null,
    selectedRowKeys: []
  };
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const apiURL = `${api_URL}/locations`;
    axios.get(apiURL).then(res => {
      this.setState({ mockTableData: res.data });
      this.setState({ loading: false });
    });
  }
  onExpand = (expanded, record) => {
    console.log("onExpand", expanded, record);
  };
  onSelect = (record, selected, selectedRows, nativeEvent) => {
    console.log(record, selected, selectedRows, nativeEvent);
  };

  render() {
    const rowSelection = {
      selectedRowKeys: [],
      onChange: this.onSelect
    };
    return (
      <div>
        <HeaderComponent />
        <h1>App user Component</h1>
        <Tabs>
          <TabPane tab="App-User" key="1">
            <Table
              columns={columns}
              rowSelection={rowSelection}
              expandedRowRender={(record, index, indent, expanded) =>
                expanded ? <p>extra: {record.location_name}</p> : null
              }
              onExpand={this.onExpand}
              dataSource={this.state.mockTableData}
            />
          </TabPane>
          <TabPane tab="Non-App-User" key="2">
            <h2>2nd Tab</h2>
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
export default AppUser;

不知道我要去哪里錯了。

Answer 1

在每個渲染上，您都重新定義rowSelection （因為render()的主體在每個渲染上執行），將其移至類實例/狀態（並相應地使用this.rowSelection / this.state.rowSelection ）。

class AppUser extends Component {
  rowSelection = {
    selectedRowKeys: [],
    onChange: this.onSelect
  };

  ...

  render() {
    return (
      <div>
        ...
        <Tabs>
          <TabPane tab="App-User" key="1">
            <Table
              rowSelection={this.rowSelection}
              ...
            />
          </TabPane>
          ...
        </Tabs>
      </div>
    );
  }
}
export default AppUser;