将功能传递给子组件

Question

我正在创建一个简单的SPFX扩展程序来管理任务列表。我创建了一个列表，该列表通过pnpjs通过REST获取项目。

我希望能够通过单击按钮来删除所述项目。当我单击删除按钮时，将打开一个模式（WarningModal），要求确认。我设法创建了一个有效的示例，但是我很难理解它为什么起作用。当我尝试遵循官方文档（https://reactjs.org/docs/faq-functions.html）中的指南时，我的代码无法正常工作。

父组件中的渲染方法：

public render = (): React.ReactElement<ITakenbeheerProps> => {
const {
  taken,
  showErrorMessage,
  errorMessage,
  showSuccessMessage,
  successMessage,
  isDataLoaded,
  showTryAgainButton,
  showDeleteModal,
  deleteModalTitle,
  deleteModalContent,
  deleteModalOkCallback,
  deleteModalCancelCallback,
} = this.state;
const { ShimmerCollection } = this;
let AssignTaskModal = this.AssignTaskModal;
let addTaskIcon: IIconProps = { iconName: "AddToShoppingList" };

return (
  <Stack
    tokens={this.verticalGapStackTokens}
    className={styles.takenBeheer}
  >
    <ActionButton iconProps={addTaskIcon}>
      {strings.NieuweTaakButton}
    </ActionButton>

    {showErrorMessage ? (
      <MessageBar
        messageBarType={MessageBarType.error}
        isMultiline={false}
        onDismiss={this.onResetAllMessageBars}
      >
        {errorMessage}
      </MessageBar>
    ) : null}

    {showSuccessMessage ? (
      <MessageBar
        messageBarType={MessageBarType.success}
        isMultiline={false}
        onDismiss={this.onResetAllMessageBars}
      >
        {successMessage}
      </MessageBar>
    ) : null}

    <Stack horizontalAlign={"center"}>
      {showTryAgainButton && (
        <PrimaryButton
          text={strings.TryAgain}
          onClick={this._populateList}
        />
      )}
    </Stack>

    <ShimmerCollection />

    {isDataLoaded ? (
      <div>
        {taken.findIndex((t) => t.toegewezenAan.name == null) > -1 ? (
          <List
            items={taken.filter((t) => {
              return t.toegewezenAan.name == null;
            })}
            onRenderCell={this.onRenderCell}
          />
        ) : (
          <div className={styles.noNewTasks}>{strings.NoNewTasks}</div>
        )}
      </div>
    ) : null}

    <AssignTaskModal />
    <WarningModal
      isModalOpen={showDeleteModal}
      title={deleteModalTitle}
      content={deleteModalContent}
      okCallback={deleteModalOkCallback}
      cancelCallback={deleteModalCancelCallback}
    />
  </Stack>
);};

警告模式 Screenshot

import * as React from "react";
import * as strings from "CicOvlTakenlijstWebPartStrings";
import {
  Modal,
  DialogFooter,
  DefaultButton,
  Button,
  getTheme,
  mergeStyleSets,
  FontWeights,
} from "office-ui-fabric-react";

/* Prop definition */
export interface IWarningModalProps {
  isModalOpen: boolean;
  title: string;
  content: string;
  okCallback: any;
  cancelCallback: any;
}

/* State definition */
export interface IWarningModalState {}

export default class WarningModal extends React.Component<
  IWarningModalProps,
  IWarningModalState
> {
  public constructor(props: IWarningModalProps) {
    super(props);
    this.state = {
      /* State initialization */
      isModalOpen: false,
    };
  }
  public render(): React.ReactElement<IWarningModalProps> {
    const {
      isModalOpen,
      okCallback,
      cancelCallback,
      title,
      content,
    } = this.props;

    return (
      <Modal
        isOpen={isModalOpen}
        isBlocking={false}
        containerClassName={contentStyles.container}
      >
        <div className={contentStyles.header}>
          {title}
        </div>
        <div className={contentStyles.body}>
          {content}
          <DialogFooter>
            <DefaultButton onClick={okCallback} text={strings.OkMessage} />
            <Button onClick={cancelCallback} text={strings.CancelMessage} />
          </DialogFooter>
        </div>
      </Modal>
    );
  }
}

为什么这样做？我希望警告模式中的代码如下，带有箭头功能：

<DialogFooter>
            <DefaultButton onClick={() => okCallback()} text={strings.OkMessage} />
            <Button onClick={() => cancelCallback()} text={strings.CancelMessage} />
</DialogFooter>

但是当我单击按钮时，什么也没有发生。调试器也不会显示任何错误消息。