Делаем всю карту кликабельной в Reactstrap - PullRequest
Новая
       20

Делаем всю карту кликабельной в Reactstrap

0 голосов
/ 30 декабря 2018

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

Мне удалось выполнить эту работу, добавив кнопку на карточку, которая связана с обработчиком событий,и работает как положено.

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

const SiteCard = props => {
  const { site, siteSelectedCallback } = props;

  return (
    <Card onClick={siteSelectedCallback} className="card-item">
      <CardBody>
        <CardTitle>{site.name}</CardTitle>
        <CardText className="text-muted">{site.address}</CardText>
        <Button color="primary" className="float-right" value={site.id}>
         CHOOSE ME
        </Button>
      </CardBody>
    </Card>
  );
};

Я пытался обернуть его в тег <a>, но это также не работает.

В этом примере я ожидаю, что на карточке можно будет нажимать,но на самом деле кнопка все еще работает с обработчиком событий.Я также попытался удалить кнопку, но это не делает карту кликабельной.

1 Ответ

0 голосов
/ 30 декабря 2018

Обертывание карты тегом a будет работать, однако у него не будет курсора-указателя без href, который можно легко изменить с помощью CSS. 

const SiteCard = ({ site, siteSelectedCallback }) => (
  <a style={{ cursor: 'pointer' }} onClick={siteSelectedCallback}>
    <Card className="card-item">
      <CardBody>
        <CardTitle>{site.name}</CardTitle>
        <CardText className="text-muted">{site.address}</CardText>
      </CardBody>
    </Card>
  </a>
);

Edit 1v6qxl0noq

Только что протестировано с console.log, поэтому, если это не сработает, это потому, что обратный вызов не работает так, как вы ожидаете.

Другим способом было бы сделать тег Card a, передав tag проп. 

<Card tag="a" onClick={siteSelectedCallback} style={{ cursor: "pointer" }}>

Edit r1mr7r2q2p

Все доступные опции четко определены в источнике Card компонента реактивной планки .

Я также тестировал с кнопкой внутри Card без проблем.

...