时间戳

首页 > 解决方案 > 选择无线电输入时如何更改图标的颜色？

reactjs - 选择无线电输入时如何更改图标的颜色？

问题描述

我已经有几个小时的问题了，我创建了两个连接到无线电输入的按钮。

我使用样式化的组件，并且我希望当用户选择该选项时，我的复选图标可能会变为白色。

我正在考虑使用状态，但我不知道它是否是正确的解决方案。

import { React, useState } from "react";
import fire from '../firebase/firebase';
import styled from "styled-components";
import { FaCheckCircle } from 'react-icons/fa';
import '../../App.css';

export const BoxContainer = styled.div`
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns:1fr 1fr;
  
`;

export const Gauche = styled.div`
 
  
`;

export const Droite = styled.div`
 
  
`;

export const Descriptif = styled.div`
    background-color: #F9F9FB;
    margin: 50px;
    border-radius: 10px;
    height: 500px;
  
`;

export const Option = styled.div`
    background-color: #8064F7;
    margin: 50px;
    border-radius: 10px;
    height: 100px;
    width:500px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  
`;

export const Optionbutton = styled.input`
 visibility: hidden;


 
`;

export const Select = styled.div`
   margin-left: 30px;

   ${Optionbutton}:checked {
       color:red !important;
   }
`;

export const Intitule = styled.div`
   text-align:left;
   font-weight:bold;
   color:white;
   font-size: 20px;
   
`;

export const MiddleBox = styled.div`
   margin-right: auto;
   margin-left: 60px;
   
`;

export const Economie = styled.div`
   background-color:#6D43E5;
   border-radius:20px;
   padding: 5px;
   color:white;
`;

export const Prix = styled.div`
   color:white;
   font-weight:bold;
   font-size:25px;
   margin-right: 20px;
`;

export const OptionLabel = styled.label`
 cursor: pointer;
`;




export function Shop(props) { 

    const [radio,setRadio] = useState("option1");
    

    console.log({radio});

    return (
        <BoxContainer>
            <Gauche>
                <Descriptif>Bonjour</Descriptif>
            </Gauche>
            <Droite><form>
            <OptionLabel><Optionbutton thechecked={props.isSelected}  type="radio" value="option1" checked={radio === "option1"} onChange={(e) =>{ setRadio(e.target.value)}}></Optionbutton>
            
            
            <Option>
                    <Select  ><FaCheckCircle   /></Select>
                    <MiddleBox>
                        
                        
                        <Intitule>1 Ticket vidéo</Intitule>
                    </MiddleBox>
                    <Prix>29.99 €&lt;/Prix>
                </Option>
            
            
            
            </OptionLabel>

            <OptionLabel><Optionbutton  type="radio" value="option2" checked={radio === "option2"} onChange={(e) =>{ setRadio(e.target.value)}}></Optionbutton>
            
            
            <Option>
                    <Select><FaCheckCircle/></Select>
                    <MiddleBox>
                        
                        
                        <Intitule>1 Ticket vidéo</Intitule>
                    </MiddleBox>
                    <Prix>29.99 €&lt;/Prix>
                </Option>
            
            
            
            </OptionLabel></form>
            </Droite>
        </BoxContainer>
    )
}

export default Shop;

输入按钮

太感谢了。

标签： reactjs

解决方案

在 styled-components 中，您可以将 props 传递给创建的组件，因此您可以将 true 值传递给 Select 组件以更改颜色。要在 styled-component 中使用 prop，请尝试以下操作：

export const Select = styled.div`
   margin-left: 30px;
   color: ${({isSelected}) => isSelected ? "red" : "black"};
`;

在 JSX 中你应该这样做：

<Select isSelected={radio === "option1"}>
   <FaCheckCircle />
</Select>

推荐阅读