Styled Component中Option组件onClick事件不生效求助

核心问题 #

你给Option（对应原生<option>元素）绑定onClick事件无效，是因为原生HTML的<option>元素本身不支持onClick事件。当点击下拉选项时，浏览器只会触发父级<select>元素的onChange事件，不会响应<option>上的点击事件。而Container是基于<div>封装的，<div>原生支持onClick，所以绑定后能正常触发。

修复方案 #

把事件处理器绑定到LanguageButton（对应原生<select>）的onChange事件上，而不是每个Option：

const Navbar = () => {
  const noBorder = (e) => {
    console.log("hello");
    // 可通过e.target.value获取选中的选项值
    console.log("选中的语言：", e.target.value);
  };
  return (
    <Container>
      <LogoWrapper>
        <Logo src={logo} alt="image not found"></Logo>
      </LogoWrapper>
      <LanguageSelector>
        <GlobeIcon src={globe} alt="image not found" />
        <label htmlFor="language">
          <LanguageButton name="language" onChange={noBorder}>
            <Option value="english">placeholder</Option>
            <Option value="hindi">placeholder</Option>
          </LanguageButton>
        </label>
      </LanguageSelector>
    </Container>
  );
};
// 样式部分保持不变

补充说明 #

如果需要针对不同选项做差异化处理，可在onChange函数里根据选中的value分支判断：

const noBorder = (e) => {
  const selectedValue = e.target.value;
  if (selectedValue === "english") {
    // 处理英文选项逻辑
  } else if (selectedValue === "hindi") {
    // 处理印地语选项逻辑
  }
  console.log("hello");
};

内容的提问来源于stack exchange，提问作者Devansh