如何替换UI Fabric DetailsList组件中的复选框

import * as React from 'react';
import { DetailsList, IColumn, Checkbox, SelectionMode, IObjectWithKey } from 'office-ui-fabric-react';

interface IListItem {
  key: string;
  name: string;
  checked: boolean;
}

interface IState {
  items: IListItem[];
}

class MyList extends React.Component<{}, IState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      items: [
        { key: '1', name: 'Item 1', checked: false },
        { key: '2', name: 'Item 2', checked: false },
        { key: '3', name: 'Item 3', checked: false },
      ],
    };
  }

  public render(): React.ReactNode {
    const columns: IColumn[] = [
      {
        key: 'checkbox',
        name: 'Checkbox',
        fieldName: 'checkbox',
        minWidth: 50,
        maxWidth: 50,
        isResizable: false,
        onRender: (item: IListItem) => {
          return (
            <Checkbox checked={item.checked} onChange={this.onCheckboxChange(item.key)} />
          );
        },
      },
      {
        key: 'name',
        name: 'Name',
        fieldName: 'name',
        minWidth: 100,
        maxWidth: 200,
        isResizable: true,
      },
    ];

    return (
      <DetailsList
        items={this.state.items}
        columns={columns}
        selectionMode={SelectionMode.multiple}
        onRenderCheckbox={this.onRenderCheckbox}
      />
    );
  }

  private onCheckboxChange = (key: string) => (ev?: React.FormEvent<HTMLElement>, isChecked?: boolean) => {
    const items = this.state.items.map((item) => {
      if (item.key === key) {
        return { ...item, checked: isChecked };
      }
      return item;
    });
    this.setState({ items });
  };

  private onRenderCheckbox = (props?: IObjectWithKey) => {
    return (
      <Checkbox
        checked={this.state.items.filter((item) => item.checked).length === this.state.items.length}
        onChange={this.onMasterCheckboxChange}
      />
    );
  };

  private onMasterCheckboxChange = (ev?: React.FormEvent<HTMLElement>, isChecked?: boolean) => {
    const items = this.state.items.map((item) => {
      return { ...item, checked: isChecked };
    });
    this.setState({ items });
  };
}

export default MyList;