С помощью стилей компонентов, как применить стиль только для небольших устройств?

Question

Моя тема стилей компонентов в настоящее время включает в себя:

const breakpoints = {
  medium: '640px',
  large: '1080px',
};

const MyContainer = styled.div`
  // Default mobile stylings
  ${({ theme }) => theme.media.medium`
     // CSS goes here
  `}

  ${({ theme }) => theme.media.large`
     // CSS goes here
  `}
`;

В моем компоненте реакции мне нужен обработчик onClick для элемента, но ТОЛЬКО когда точка останова мала, не средняя или большая.

В моем компоненте реагирования по какой-то причине я не могу понять это ...

const MyC = class extends React.Component {
  render() {
    console.log(this.props.theme);
    ....
  }
};

При использовании стилизованных компонентов для обработки точек останова, как я могу сообщить своему компоненту реагирования, если текущая точка останова в настоящее время имеет размермаленький и только потом использовать обработчик onClick?

Answer 1

Вы должны справиться с этим с помощью JavaScript. Добавьте это к вашему компоненту:

isEnabled = true;

calcButtonState = () => {
  if(window.innerWidth < breakpoints.medium) {
    this.isEnabled = false;
  } else {
    this.isEnabled = true;
  }    
}

handleButtonClick = () => {
   if(this.isEnabled === false) {
     return;
   }
}

componentDidMount() {
  this.calcButtonState();

  window.addEventListener('resize', this.calcButtonState);
}

componentWillUnmount() {
  window.removeEventListener('resize', this.calcButtonState);
}

То, что это делает, в основном, устанавливает булево значение на true, если ваше окно с больше среднего, а если оно меньше, установите на false. Вы нажимаете обработчик, затем проверяете это логическое значение. Если значение равно false, оно немедленно вернется.

Пожалуйста, используйте здесь также некоторую функцию debounce для события resize.