Как мне переключить класс с помощью радио-компонента React с помощью хуков? - PullRequest
Новая
       43

Как мне переключить класс с помощью радио-компонента React с помощью хуков?

0 голосов
/ 09 октября 2019

Я собрал компонент выбора радио с React Hooks, который переключается между двумя опциями, которые работают. Как добавить класс в поле контуров, когда выбран переключатель? Я хочу, чтобы фон изменился с белого на серый. Я использую стилизованные компоненты и пытался сделать это, используя только CSS, но безуспешно. Как я могу использовать крючки для достижения этой цели? Рабочий образец здесь: https://codesandbox.io/embed/react-styled-components-radio-button-qpxul?fontsize=14

const { useState } = React;

const App = () => {
  const [select, setSelect] = useState("optionA");

  const handleSelectChange = event => {
    const value = event.target.value;
    setSelect(value);
  };
  return (
    <Wrapper>
      <Item>
        <RadioButton
          type="radio"
          name="radio"
          value="optionA"
          checked={select === "optionA"}
          onChange={event => handleSelectChange(event)}
        />
        <RadioButtonLabel />
        <div>Choose Pickup</div>
      </Item>
      <Item>
        <RadioButton
          type="radio"
          name="radio"
          value="optionB"
          checked={select === "optionB"}
          onChange={event => handleSelectChange(event)}
        />
        <RadioButtonLabel />
        <div>Choose Delivery</div>
      </Item>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  height: auto;
  width: 100%;
  padding: 0px 16px 24px 16px;
  box-sizing: border-box;
`;

const Item = styled.div`
  display: flex;
  align-items: center;
  height: 48px;
  position: relative;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 2px;
  margin-bottom: 10px;
`;

const RadioButtonLabel = styled.label`
  position: absolute;
  top: 25%;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  border: 1px solid #ccc;
`;
const RadioButton = styled.input`
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  &:hover ~ ${RadioButtonLabel} {
    background: #ccc;
    &::after {
      content: "\f005";
      font-family: "FontAwesome";
      display: block;
      color: white;
      width: 12px;
      height: 12px;
      margin: 4px;
    }
  }
  &:checked + ${Item} {
    background: yellowgreen;
    border: 2px solid yellowgreen;
  }
  &:checked + ${RadioButtonLabel} {
    background: yellowgreen;
    border: 1px solid yellowgreen;
    &::after {
      content: "\f005";
      font-family: "FontAwesome";
      display: block;
      color: white;
      width: 12px;
      height: 12px;
      margin: 4px;
    }
  }
`;

1 Ответ

1 голос
/ 09 октября 2019

В CSS нет родительского селектора, поэтому вы не можете настроить таргетинг на родительский элемент из checkbox.

Но вы можете добавить класс на основе выбранного состояния радио 

<Item className={select === "optionA" ? 'active-radio' : null}>

или, если вы хотите сделать это с помощью стилизованных компонентов, вы можете использовать 

<Item active={select === "optionA"}>

в сочетании с 

const Item = styled.div`
  display: flex;
  align-items: center;
  height: 48px;
  position: relative;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 2px;
  margin-bottom: 10px;
  ${props => props.active && (`
    box-shadow: 0 0 10px -4px black;
  `)}
`;

Демо на https://codesandbox.io/s/react-styled-components-radio-button-f5zpe

...