Стилизованные компоненты и реакция: событие нажатия

Question

Я пытаюсь создать onClick для компонента Styled Components, но он не работает. Это не логирование hello в консоли.

<Component onClick={this.handleClick} />

РучкаНажмите:

handleClick(e) {
    console.log("hello");
}

Это также в конструкторе:

this.handleClick = this.handleClick.bind(this);

Компонент:

const Component = styled.span`
    /* Regular CSS */
    ${css};
`;

Заранее спасибо!

EDIT:

Компонент вложен в компонент Button. Когда я добавляю onClick к кнопке, в консоли отображается hello. Однако я хочу, чтобы ребенок имел эту функцию, а не родитель.

РЕДАКТИРОВАТЬ 2:

Хорошо, поэтому, когда я меняю CSS, это работает. Понятия не имею почему. Это мой css:

        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        display: block;
        z-index: 0;
        position: absolute;
        overflow: hidden;
        border-radius: inherit;

Answer 1

Возможно, вы захотите попробовать это:

handleClick = e => {
  console.log('hello');
}

...

<Component onClick={(e) => this.handleClick(e)} />

или

<Component onClick={this.handleClick.bind(e)}/>

Answer 2

Ваш диапазон отображается со значением css display: inline. Если в нем нет фактического содержимого для расширения, оно будет иметь ширину 0 пикселей, и поэтому вы фактически не нажимаете на него.

Я столкнулся с теми же проблемами, и в Styled Components я не смог заставить его работать принудительно display: block. Вы должны использовать интерактивный элемент, например styled.button...

Answer 3

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

handleClick = () => console.log('click')

Если ваша кнопка находится ВНУТРИ, вы должны использовать другой реквизит, так как onClick привязан к событию onClick. Попробуйте

// In Parent
<Parent action={this.handleClick} />

// In Child
<Child onClick={this.props.action} />