我将带有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;
}
}
`;
答案 0 :(得分: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