2类型：单击react时会更改颜色的无线电按钮

Question

我想制作一个组件，有两个选项，当您选择一个选项时，按钮的颜色被切换了，目前，我正在尝试使用类型的输入：无线​​电，但是我想知道是否有任何另一种与React一起做的方法。

import React, {useState} from 'react'

function BotonCambioPerfil() {

    const [gender, setGender] = React.useState('Famale');

    const handleCatChange = () => {
        setGender('Male');
      };
    
      const handleDogChange = () => {
        setGender('Female');
      };

  return (
    <div className='contenedorBotonCambioPerfil'>

    <RadioButton
        label="Male"
        value={gender === 'Male'}
        onChange={handleCatChange}
      />
      <RadioButton
        label="Female"
        value={gender === 'Female'}
        onChange={handleDogChange}
      />
        
        </div>
  )
}

const RadioButton = ({ label, value, onChange }) => {
    return (
      <label>
        <input type="radio" checked={value} onChange={onChange} />
        {label}
      </label>
    );
  };
  
  
export default BotonCambioPerfil

态

Answer 1

此示例采用性别状态（默认为女孩），并设置一个const，该const检查性别是否等于女孩，它将返回粉红色组件，而其他将返回蓝色组件。 ONCLICK函数将状态更改为性别而不是。 （女孩或男孩）

import React, { useState } from 'react'

export default function App() {

  const [ gender , setGender ] = useState("girl")

  const changeGender = () => {
    if(gender === "girl") {
      setGender("boy")
    } else setGender("girl")
  }

  const genderBtn = gender === "girl" ?
  <h2 onClick={changeGender} style={{
    backgroundColor: "pink",
    width: "100px",
    padding: "2px",
    borderRadius: "100px",
    cursor: "pointer",
  }}>{gender}</h2>
  :
  <h2 onClick={changeGender} style={{
    backgroundColor: "lightblue",
    width: "100px",
    padding: "2px",
    borderRadius: "100px",
    cursor: "pointer",
  }}>{gender}</h2>

  return (
    <div className="App">
      <h1>Gender Switch</h1>
      {genderBtn}
    </div>
  );
}