Skip to content

tsx 控件结构

ythy edited this page Nov 6, 2017 · 1 revision
  • propsstate 都需要定义类型
  • ...this.props 需要去除自定义参数向下传递
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';

export interface IdentifyCodeProps{
  className?: string; 
  children?: any; 
  style?: React.CSSProperties; 

  duration?: number;
  defaultBtnText?: string;
}

interface IdentifyCodeState{
  countDownNumber?: number;
}

export default class IdentifyCode extends Component<IdentifyCodeProps, IdentifyCodeState> {

  static defaultProps = {
    duration: 6,
    defaultBtnText: '发送验证码',
  }

  constructor(props: IdentifyCodeProps) { 
    super(props); 
    this.state = {
      countDownNumber: 0,
    }
  } 

  onButtonClick = ( event:React.MouseEvent<HTMLButtonElement> )=>{

  }

  render () {
    const { duration, defaultBtnText, ...restProps } = this.props;
    const { countDownNumber } = this.state;
    return (
      <button {...restProps}  onClick={this.onButtonClick} > 
	{buttonText} 
      </button>
    );

  }

}
Clone this wiki locally