Question

我的应用程序中有一个下拉菜单，我想要它，以便当用户从下拉菜单中选择其他选项时，它应该更新网址。

例如，如果我有一个DropDown组件，例如：

class DropDown extends React.Component {
  render() {
    return (
      <select>
        <DropDownOption name="foo" />
        <DropDownOption name="bar" />
      </select>
    );
  }
}

还有一个DropDownOption组件，例如：

import { Link } from 'react-router-dom';  

class DropDownOption extends React.Component {
render() {
    return (
      <option>
        <Link to={`/value=${this.props.name}`}>
        </Link>
      </option>
    );
  }
}

如果用户单击下拉列表，然后选择“ foo”，则网址将更改为例如：“ localhost:3000/value=foo”，并且当他们选择“ bar”时，它将变为“ localhost:3000/value=bar”

但是，这不起作用，因为<option>标记中不能包含<a>标记，但是我希望使用<Link>中的react-router-dom来实现模块，因为我已经在其他地方（例如用于按钮）使用它来更改路线参数，并且效果很好。

有什么建议可以实现这一目标吗？

Answer 1

在选择项上附加一个onChange事件，并在其中推入路由器作为道具传递的history对象。

编辑：

这是一个例子 https://codesandbox.io/s/w031p82nr5

在React中选择其他下拉选项时更改路线参数

1 个答案: