onClick 事件处理程序未应用于样式组件

Question

在代码中，我在 Option 组件上应用了 onClick 事件处理程序，该处理程序在单击时触发 noBorder 函数，但单击该函数不起作用，因为我在控制台中没有收到“hello”。然而，在 Container 组件中应用相同的事件处理程序是有效的。谁能告诉我哪里错了。

const Navbar = () => {
  const noBorder = (e) => {
    // e.preventDefault();
    // e.currentTarget.style.border = "none";
    console.log("hello");
  };
  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">
            <Option value="english" onClick={noBorder}>
              placeholder
            </Option>
            <Option value="hindi" onClick={noBorder}>
              placeholder
            </Option>
          </LanguageButton>
        </label>
      </LanguageSelector>
    </Container>
  );
};
const Container = styled.div`
`;
const Logo = styled.img`
`;
const LogoWrapper = styled.div`
`;
const LanguageButton = styled.select`
`;
const Option = styled.option`
`;
const GlobeIcon = styled.img`
`;
const LanguageSelector = styled.div`
`;

Answer 1

option

是一个特殊的 HTML 标签，作为

select

的一部分呈现，因此交互和样式非常有限。它与

styled-components

无关，因为 props 只是传递。请参阅此处以获得更深入的答案。