如何在 reactjs 中制作這樣的自定義單選按鈕

Question

我怎樣才能做出這種布局。 這類似於單選按鈕。 實時鏈接 - codesandbox.io/s/amazing-sunset-54916但也請閱讀該問題。

最初——

經過我們 select 男

或女性

我需要做這個，我已經有了沒有顏色和有顏色的男性和女性的圖像。

我試圖在其中添加標簽和圖像，但是我怎么知道選擇了哪一個，並假設其他部分的選項增加了，比如有 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>

Answer 1

我會這樣做：這個例子不處理onMouseOver和onMouseOut事件。 根據您的需要進行處理。 （如果懸停突出顯示的元素，或者懸停基本元素）如果要跟蹤上部組件中的數據，只需從<Selection />組件中取出 state

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>
  );
};