javascript - 如何在reactjs中制作这样的自定义单选按钮

Question

我怎样才能做出这种布局。这类似于单选按钮。实时链接 - codesandbox.io/s/amazing-sunset-54916 但也请阅读该问题。

最初——

在我们选择男性之后

或女性

我需要做这个，我已经有了没有颜色和有颜色的男性和女性的图像。

我试图在其中添加标签和图像，但是我怎么知道选择了哪一个，并假设其他部分的选项增加了，比如有 6-7 个选项？我将如何知道选择了哪一个。

在这种情况下，图像的点击也不起作用。

我的代码——

    <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>

标签： javascripthtmlcssreactjs

Answer 1

我会这样做：这个例子不处理onMouseOver和onMouseOut事件。根据您的需要进行处理。（如果悬停突出显示的元素，或者悬停基本元素）如果要跟踪上组件中的数据，只需从<Selection />组件中取出状态

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