如何在反应、样式化的组件中使用字体真棒图标更改单选按钮的颜色答案

【问题标题】：How to change the color of radio button with font awesome icon in react, styled components如何在反应、样式化的组件中使用字体真棒图标更改单选按钮的颜色
【发布时间】：2025-11-27 21:05:01
【问题描述】：

我只想改变点击的图标颜色，但点击时整个图标的颜色会改变。我知道这基本上是因为 useState 没有分配给每个点击事件，但我被困在这里，不知道如何处理。

  const moods = [
    { icon: faGrinStars, mood: 'super' },
    { icon: faSmile, mood: 'good' },
    { icon: faMeh, mood: 'soso' },
    { icon: faFrown, mood: 'bad' },
    { icon: faAngry, mood: 'angry' },
  ];

  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(!clicked);
  };

  return (
    <StyledDiv>
      {moods.map((mood) => (
        <div key={mood.mood}>
          <input
            type='radio'
            name='mood'
            id={mood.mood}
            onClick={handleClick}
          />
          <label htmlFor={mood.mood}>
            <FontAwesomeIcon
              icon={mood.icon}
              size='2x'
              style={clicked ? { color: 'red' } : { color: '#5e5c5a' }}
            />
          </label>
        </div>
      ))}
    </StyledDiv>
  );
};

const StyledDiv = styled.div`
  ${({ theme }) => {
    const { colors } = theme;
    return css`
      input {
        display: none;
      }
    `;
  }}
`;

export default MoodIcons;

【问题讨论】：

标签： reactjs radio-button

【解决方案1】：

使用数组保存所有点击按钮的状态。像这样的：

const moods = [
    { icon: faGrinStars, mood: 'super' },
    { icon: faSmile, mood: 'good' },
    { icon: faMeh, mood: 'soso' },
    { icon: faFrown, mood: 'bad' },
    { icon: faAngry, mood: 'angry' },
];

const [clicked, setClicked] = useState([false, false, false, false, false]);

const handleClick = (i) => {
    setClicked(prevState => {
        const nextStaet = [...prevState];
        nextStaet[i] = !nextStaet[i];
        return nextStaet;
    });
};

return (
    <StyledDiv>
        {moods.map((mood, index) => (
            <div key={mood.mood}>
                <input
                    type='radio'
                    name='mood'
                    id={mood.mood}
                    onClick={() => handleClick(index)}
                />
                <label htmlFor={mood.mood}>
                    <FontAwesomeIcon
                        icon={mood.icon}
                        size='2x'
                        style={clicked[clicked] ? { color: 'red' } : { color: '#5e5c5a' }}
                    />
                </label>
            </div>
        ))}
    </StyledDiv>
);
};

const StyledDiv = styled.div`
${({ theme }) => {
        const { colors } = theme;
        return css`
    input {
        display: none;
    }
    `;
    }}
`;

export default MoodIcons;

【讨论】：