在 React 中选择不同的下拉选项时更改路由参数答案

【问题标题】：Changing route parameters when a different dropdown option is selected in React在 React 中选择不同的下拉选项时更改路由参数
【发布时间】：2018-12-18 22:36:29
【问题描述】：

我的应用程序中有一个下拉列表，我想要它，以便当用户从下拉列表中选择不同的选项时，它应该更新 url。

例如，如果我有这样的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”，则 url 将更改为例如：“localhost:3000/value=foo”，当他们选择'bar'时，它会变为“localhost:3000/value=bar”

但是，这不起作用，因为<option> 标记内部不能有<a> 标记，但我希望使用react-router-dom 模块中的<Link> 来做到这一点，因为我一直在使用它其他地方（例如按钮）来更改路由参数并且效果很好。

有什么建议可以如何实现吗？

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

将onChange 事件附加到选择并在其中推送到路由器作为道具传递的history 对象。

编辑：

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

【讨论】：