Как создать универсальную кнопку?

Question

ffads livd00 @livd98

React

Как создать универсальную кнопку?

Как создать универсальный компонент кнопку, если визуально она более менее похожа на остальные кнопки, но при клике делает разный функционал?
Как это сделать если нельзя ставить обработчик событий на компонент?
<Button color={"inherit"}/>
Вижу выход только такой

<div onClick={() => {
     toggleAdd(!open)
     setUser("")
     setPhone("")
}}>
     <Button color={"inherit"}/>
</div>

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

export const Button = ({phone, text, color, textColor, border}) => {
  return (
    <>
      {phone ? (
        <a className="phone" href={`tel:${phone}`} ><img src="./Assets/Phone.svg" alt="" /></a>
      ):(
        <button 
          className="submit" 
          style={{
            background: color,
            color: textColor,
            border: border,
          }}
        >
          {text}
        </button>
      )}
    </>
  )
}

Вопрос задан более трёх лет назад
1092 просмотра

6 комментариев

Подписаться 1 Простой 6 комментариев

Алексей Уколов @alexey-m-ukolov Куратор тега React

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

Написано более трёх лет назад
ffads livd00 @livd98 Автор вопроса
Алексей Уколов, а как его поставить?
<Button onClick={() => console.log('test')}>Button</Button>

Это не работает
Написано более трёх лет назад
Алексей Уколов @alexey-m-ukolov Куратор тега React

Ну а вы внутри компонента-то переданную функцию привязываете к настоящей кнопке?

Написано более трёх лет назад
TheOnlyFastCoder2 @TheOnlyFastCoder2

ffads livd00, может нужно было написать
<button> </button> а не <Button> </Button> ?

Написано более трёх лет назад
drotsyk @drotsyk

Алексей Уколов, вы хотите, чтобы я передавал функцию в кнопку и там ее ставил?Я просто думал можно сразу поставить на Button

Написано более трёх лет назад
WbICHA @WblCHA

drotsyk, ты вообще кто и по какой причине отвечаешь как автор?

Написано более трёх лет назад

нельзя ставить обработчик событий на компонент
Почему?
Алексей Уколов, а как его поставить?
<Button onClick={() => console.log('test')}>Button</Button>

Это не работает
Ну а вы внутри компонента-то переданную функцию привязываете к настоящей кнопке?
ffads livd00, может нужно было написать
<button> </button> а не <Button> </Button> ?
Алексей Уколов, вы хотите, чтобы я передавал функцию в кнопку и там ее ставил?Я просто думал можно сразу поставить на Button
drotsyk, ты вообще кто и по какой причине отвечаешь как автор?

Answer 1 · 2021-08-01 21:13:09

Я не понимаю , зачем вам нужно менять местами ссылку с кнопкой , в чем смысл ?
Я понимаю вы хотите сделать кнопку одну но для разных целей , но так не очень хорошо делать как по мне

//css
.submit.myStyles1 {
}
.submit.myStyles2 {
}
.submit.myStyles3 {
}

const myfunction1 = () => {}
const myfunction2 = () => {}


const PhoneBTN = ({phone}) => (
  <a className="phone" href={`tel:${phone}`}>
    <img src="./Assets/Phone.svg" alt="" />
  </a>
)

const Button = ({type,text}) => {
  
  return (
    type === "phone" ? 
    <PhoneBTN {...{phone:text}} onClick={myfunction1}/>: 
    <button className="submit myStyles" onClick={myfunction2}>{text}</button> 
  )
} 

const render = () => (
  <Button {...{type:"phone",text:""}}/>
)

Как создать универсальную кнопку?

Войдите на сайт