почему исчезло «это» о классе

Question

Сегодня я хочу попробовать что-то другое для обработки переменной ReactNode, которую можно изменить с помощью моего

, поэтому я принимаю его как объект, и его ключ - это число, а значение - это ReactNode, который я хочу.

все было в порядке;

но когда я нажимаю кнопку и запускаю, произошла ошибка onCance! вот так

TypeError: Невозможно прочитать свойство 'panelRef' неопределенного

, но почему? Я связал это в конструкторе; я не знаю. Вот часть моего кода

import React, { PureComponent, ReactElement } from 'react';
import { Modal, Button, Steps } from 'antd';
import { PopPanel } from '@alife/alimekits-pop-panel';

import ReactDOM from 'react-dom';
import { Shop, CheckedItem } from '../../interface/index';
import styles from './index.module.less';

const Step = Steps.Step;

interface Props {
}
interface State {
  currentStep: number;
}
class CopyConfiguration extends PureComponent<Props, State> {
  [x: string]: any;
  private panelRef;

  constructor(props: Props) {
    super(props);
    this.state = {
      currentStep: 1,
    }
    this.onCancel = this.onCancel.bind(this);
    this.stepBack = this.stepBack.bind(this);
    this.stepPush = this.stepPush.bind(this);
    this.onOk = this.onOk.bind(this);
    this.beginCopy = this.beginCopy.bind(this);
    this.handleConfirmTextChange = this.handleConfirmTextChange.bind(this);
  }

  onCancel() {
    console.log(' this ', this, )
    this.panelRef.hide();
  }

  onOk() {

    this.panelRef.hide();
  }


  // 使用策略模式做不同step下的footer按钮
   footer: {
     [index: number]: ReactElement;
   } = {
     1: (
        <div className={styles.footerBar}>
         <Button onClick={this.onCancel}>取消</Button>
         <Button type="primary" onClick={this.stepPush} disabled={false}>
           下一步
         </Button>
       </div>
     ),
     2: (
       <div className={styles.footerBar}>
         <Button onClick={this.stepBack}>上一步</Button>
         <Button type="primary" onClick={this.beginCopy}>
           开始同步
         </Button>
       </div>
     ),
     3: (
       <div className={styles.footerBar}>
         <Button type="primary" onClick={this.onOk}>
           隐藏
         </Button>
       </div>
     )
   }

  render() {
    const { state, footer } = this;
    const { currentStep } = state;

    return (
      <PopPanel
        title="同步配置"
        destroyOnClose
        footer={footer[currentStep]}
        ref={ref => this.panelRef = ref}
      >
        123
      </PopPanel>
    )
  }
}


export default PopPanel.wrapper(CopyConfiguration, true);

someexplain: PopPanel как Modal от antd; это полезно, когда я нажимаю кнопку. поэтому он исчез в то время, когда в функции ручки; когда я определяю нижний колонтитул в рендере. everthin в порядке. но я хочу знать, почему это изменение на undefined в функции.

Answer 1

Машинопись установит значение для свойства нижнего колонтитула перед вызовом конструктора. Таким образом, нижний колонтитул использует оригинальные обратные вызовы.

Самый простой способ исправить это - заменить свойство нижнего колонтитула на метод renderFooter (), который возвращает те же данные