Передать необязательный обработчик событий пользовательской кнопке - PullRequest
Новая
       12

Передать необязательный обработчик событий пользовательской кнопке

0 голосов
/ 20 апреля 2020

У меня есть пользовательский компонент кнопки Material-UI: 

type ButtonProps = { disabled: boolean; text: string };

export function CustomButton({ disabled, text }: ButtonProps) {
  return (
    <Button
      type="submit"
      disabled={disabled}
      style={{
        background: '#6c74cc',
        borderRadius: 3,
        border: 0,
        color: 'white',
        height: 48,
        padding: '0 30px',
      }}>
      {text}
    </Button>
  );
}

<CustomButton
  disabled={
    !formik.values.userId ||
    !formik.values.numberPlate ||
    !formik.values.freeSeats
  }
  text={'Add Vehicle'}
/>

В большинстве случаев мне не нужно передавать обработчик событий. Но в одном конкретном случае мне нужно добавить onClick={() => ShowUsers()}

Как я могу изменить свой пользовательский компонент так, чтобы мне было необязательно передавать обработчик событий. Я не изменяю его использование во всех других местах, где я уже использую кнопку.

Я пробовал это: 

type ButtonProps = { disabled: boolean; text: string, onClick?: () => void; };

// submit button

export function CustomButton({ disabled, text, onClick }: ButtonProps) {
  return (
    <Button
      type="submit"
      disabled={disabled}
      style={{
        background: '#6c74cc',
        borderRadius: 3,
        border: 0,
        color: 'white',
        height: 48,
        padding: '0 30px',
      }}>
      {text}
      {onClick}
    </Button>
  );
}

<CustomButton disabled={!searchItem} text={'CHECK'} onClick={ShowUsers()}></CustomButton>

, но при onClick выдает ошибку, что 

button.tsx(4, 55): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & ButtonProps'

Возможно, некоторая проблема с синтаксисом.

Ответы [ 2 ]

2 голосов
/ 20 апреля 2020

Это то, как вы можете исправить свой псевдоним типа, 

type ButtonProps = { 
  disabled: boolean;
  text: string
  onClick?: () => void;
};

И это то, как вы можете привязать метод к вашему Button событию onClick. Вам нужно будет сделать нулевую проверку, так как onClick - это дополнительная опора. 

<Button
  type="submit"
  onClick={() => (onClick ? onClick() : null)}
  disabled={disabled}
  style={{
    background: '#6c74cc',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
  }}>
  {text}
</Button>
1 голос
/ 20 апреля 2020

Вы можете сделать это, добавив ? в реквизит 

type ButtonProps = { disabled: boolean; text: string ; onClick? : any};
...