преобразовать функциональный компонент React в класс с помощью свойств - PullRequest
Новая
       51

преобразовать функциональный компонент React в класс с помощью свойств

0 голосов
/ 10 июля 2020

Я надеялся найти некоторую помощь в решении этой проблемы. Я конвертировал файл в компонент на основе классов. Некоторое время я боролся с этим, и я просто не могу заставить onClick работать правильно. Все остальное отображается нормально, но функция щелчка просто не работает. Буду очень признателен за любые советы, отзывы или помощь! 

 import * as React from 'react';
    import "./bsi-tabs.scss"
    import IBsiTabProps from "./ibsi-tab-props"
    
    
      
    function Tab ({
        onClick = function(){return; },
        tabIndex = '',
        tabID = ''
    
    }: IBsiTabProps) {
        return (
          <li>
            <a
              
              onClick={(event) => {
                event.preventDefault();
                onClick(tabIndex);
              }}
              href="/#"
            >
              {tabID}
            </a>
          </li>
        );
    }
    export default BsiTab;

my attempt at conversion :

import * as React from 'react';
import "./bsi-tabs.scss"
import IBsiTabProps from "./ibsi-tab-props"

/*
    Credit https://gist.github.com/diegocasmo/5cd978e9c5695aefca0c6a8a19fa4c69 for original
    js files, edited by Robert McDonnell to convert to typescript
*/  
export class BsiTab extends React.Component<IBsiTabProps, any> {
  
  onClick = function(){return; }
    tabIndex = ''
    tabID = ''
  
    render(){
    return (
      <li>
        <a
          
          onClick={(event) => {
            event.preventDefault();
            this.onClick(this.props.tabIndex);
          }}
          href="/#"
        >
          {this.props.tabID}
        </a>
      </li>
    );
        }
}

export default BsiTab;

interface : 
export default interface IBsiTabProps {
    onClick      ?: Function;
    tabIndex     ?: Number | string;
    tabID: String;
    children : React.ReactNode;
}
...