如何使用 Hooks 使用 React 无线电组件切换类?

Question

我已经用 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;
}
}
`;

Answer 1

在 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 演示