Javascript 如何在reactjs中创建这样的自定义单选按钮

我怎样才能做出这样的布局。这有点像单选按钮。 实时链接- 但也请阅读问题

最初-

在我们选择男性之后

还是女性

我需要做这个，我已经有了没有颜色和有颜色的男性和女性的形象

我试着把标签和图片放进去，但是我怎么知道选择了哪一个，并且假设选项在其他部分增加，比如有6-7个选项呢？我将如何知道哪一个被选中

在这种情况下，图像的onclick也不起作用

我的代码-

    <div className="gender">
        <h2 className="title">Gender</h2>
        <a className="round">
          <img
            onClick={(e) => {
              e.src = require("../images/enables_png/1a.png");
            }}
            src={require("../images/disables_png/1a.png")}
            onMouseOver={(e) =>
              (e.currentTarget.src = require("../images/enables_png/1a.png"))
            }
            onMouseOut={(e) =>
              (e.currentTarget.src = require("../images/disables_png/1a.png"))
            }
            className="round_icon"
          ></img>
          <p className="button_detail">Male</p>
        </a>
        <a className="round">
          <img
            src={require("../images/disables_png/1b.png")}
            onMouseOver={(e) =>
              (e.currentTarget.src = require("../images/enables_png/1b.png"))
            }
            onMouseOut={(e) =>
              (e.currentTarget.src = require("../images/disables_png/1b.png"))
            }
            className="round_icon"
          ></img>
          <p className="button_detail">Female</p>
        </a>
      </div>

我会像这样做smt： 此示例不处理onMouseOver和onMouseOut事件。根据你的需要处理它。如果将鼠标悬停在高亮显示的元素上，或将鼠标悬停在基本元素上 如果要跟踪上部组件中的数据，只需从组件中取出状态

function Comp() {
  return (
    <>
      <div className="gender">
        <h2 className="title">Gender</h2>
        <Selection
          elements={[
            {
              base: require("../images/disables_png/1a.png"),
              highlighted: require("../images/enables_png/1a.png"),
              label: "Male"
            },
            {
              base: require("../images/disables_png/1b.png"),
              highlighted: require("../images/enables_png/1b.png"),
              label: "Female"
            }
          ]}
        />
      </div>
    </>
  );
}

const Selection = props => {
  const [selected, setSelected] = useState(null);

  const [mouseOver, setMouseOver] = useState(null);

  const isSelected = inx => inx === selected;
  return (
    <div>
      {props.elements.map((element, index) => {
        return (
          <a className="round" key={"index-" + index}>
            <img
              key={"i" + index}
              alt="andmatkatola"
              onClick={e => {
                return setSelected(index);
              }}
              src={
                (mouseOver || mouseOver === 0)
                  ? mouseOver === index
                    ? element.highlighted
                    : element.base
                  : isSelected(index)
                    ? element.highlighted
                    : element.base
                }
              onMouseOver={e => {
                setMouseOver(index);
                if(!isSelected(index)) {
                  e.currentTarget.src = element.highlighted
                }
              }}
              onMouseOut={e => {
                setMouseOver(null);
                if(!isSelected(index)) {
                  e.currentTarget.src = element.base
                }
              }}
              className="round_icon"
            />
            <p className="button_detail">
              {element.label} - {index}
            </p>
          </a>
        );
      })}
      {selected}
    </div>
  );
};

---

你能在这里创建你的输出的演示吗：并共享链接？请显示更多你的React组件的代码或创建一个可运行的示例。好的，等等，我正在codesandbox.io上创建，并将在post本身上共享。这是链接谢谢，经过几个小时的努力，我已经做了同样的事情。还是谢谢。你还能努力添加mouseover和mouseout吗？我还要补充一点。如果你没有；不介意，我只做smt。像这样我想这个答案是为了掩盖你的问题？