时间戳

首页 > 解决方案 > 为什么关于班级的“这个”消失了

javascript - 为什么关于班级的“这个”消失了

问题描述

今天我想尝试一些不同的东西来处理一个 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}>上一步&lt;/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 类似于 antd 的 Modal；当我单击按钮时，这很有用。所以它在句柄函数中的时间消失了；当我在渲染中定义页脚时。一切都好。但我想知道为什么在函数中这个改变为 undefined 。

标签： javascriptreactjstypescriptecmascript-6

解决方案

打字稿将在构造函数调用之前将值设置为页脚属性。所以页脚使用原始回调。

修复它的最简单方法是用返回相同数据的 renderFooter() 方法替换页脚属性

推荐阅读