reactjs React下拉按钮

xhv8bpkk 于 2023-02-08 发布在 React

关注(0)|答案(3)|浏览(159)

我想使用DropdownButton来更改我网站上的语言。我使用Select来更改语言。不幸的是，在Select中的img位置有问题，所以我想使用DropdownButton来更改。在这里，我从Dropdown.Item中获取值时遇到了问题。
我得到的信息是：Uncaught TypeError: evt is null.在这种情况下我该怎么办

const DropdownLanguage = () => {
  const { i18n } = useTranslation();
  const [language, setLanguage] = useState("pl");

  const handleLangChange = (evt) => {
    const lang = evt.target.value;
    console.log(lang);
    setLanguage(lang);
    i18n.changeLanguage(lang);
  };

  return (
    <>
      <DropdownButton
        id="dropdown-basic-button"
        title="Dropdown button"
        value={language}
        onSelect={handleLangChange}
      >
        <Dropdown.Item value="pl">
          <img className="flag" src={PL} />
          PL
        </Dropdown.Item>
        <Dropdown.Item value="en">
          <img className="flag" src={UK} />
          EN
        </Dropdown.Item>
      </DropdownButton>
    </>
  );
}

我检查了React Bootstrap中的文档

reactjs

来源：https://stackoverflow.com/questions/75347166/react-dropdownbutton

3条答案

按热度按时间

wj8zmpe11#

我读了react bootstrap的文档，发现这可能就是问题所在。
select回调向您发送2个参数，第一个是eventKey，第二个是event。
OnSelect函数说明：
选择菜单项时激发的回调。
（事件密钥：任何，事件：对象）=〉任何
尝试更改handleChange函数：

const handleLangChange = (evtKey, evt) => {
 const lang = evt.target.value;
 console.log(lang);
 setLanguage(lang);
 i18n.changeLanguage(lang);
 };

祝你好运!

赞(0）回复(0）举报 2023-02-08

agyaoht72#

Dropdown.Item组件上缺少selectKey属性。请参阅Dropdown.Item的文档：
| 姓名|类型|默认值|说明|
| - ------|- ------|- ------|- ------|
| ...|...|...|...|
| 事件密钥|串数| number |传递给onSelect处理程序的值，用于标识选定的菜单项。| Value passed to the onSelect handler, useful for identifying the selected menu item. |
并注意Dropdown.onEvent的文档，其中第一个参数名为eventKey：
| 姓名|类型|默认值|说明|
| - ------|- ------|- ------|- ------|
| ...|...|...|...|
| 在选择|函数||选择菜单项时激发的回调。(eventKey: any, event: Object) => any|
注意，DropdownButton是一个方便的组件，它用嵌套的Dropdown.Toggle和Dropdown.Menu组件 Package Dropdown组件，用任何Dropdown.Item组件填充Dropdown.Menu子组件。
您可能错误地使用了value属性而不是eventKey。将value替换为eventKey可以正常工作，此属性的值将作为第一个参数直接传递给处理程序：

const DropdownLanguage = () => {
  const { i18n } = useTranslation();
  const [language, setLanguage] = useState("pl");

  const handleLangChange = (lang) => {
    console.log(lang);
    setLanguage(lang);
    i18n.changeLanguage(lang);
  };

  return (
    <>
      <DropdownButton
        id="dropdown-basic-button"
        title="Dropdown button"
        onSelect={handleLangChange}
      >
        <Dropdown.Item eventKey="pl" active={language === 'pl'}>
          <img className="flag" src={PL} />
          PL
        </Dropdown.Item>
        <Dropdown.Item eventKey="en" active={language === 'en'}>
          <img className="flag" src={UK} />
          EN
        </Dropdown.Item>
      </DropdownButton>
    </>
  );
}

请注意，DropdownButton也没有value属性。要选择特定菜单选项作为选定项，请将选定Dropdown.Item的active属性设置为true。
下面是一个在线沙盒演示：

如果你给handleLangChange()处理器另一个参数来接收它，你可以访问事件对象本身（和event.target），或者你可以使用arguments[1]。在这种情况下，你必须使用一个DOM方法，比如event.target.getAttribute("value")，来访问任何属性。但这真的是多余的。

赞(0）回复(0）举报 2023-02-08

hwazgwia3#

根据docs，DropdownButton没有属性onSelect。onSelect只存在于Dropdown中，因此您可以从DropdownButton更改为Dropdown。