reactjs：与FormGroup的选择框，当选择一个选项时如何路由到其他页面

问题描述：

正如标题所述。我有一个选择框，可以说我在'/ home'，并且当选择框中的一个选项被选中时，我希望页面直接到'/ home/test'。我从react-router-bootstrap试过LinkContainer。但它不适用于option标签。reactjs：与FormGroup的选择框，当选择一个选项时如何路由到其他页面

任何人都可以帮助我吗？我使用react-router V4

<FormGroup controlId="formControlsSelect"> 
     <ControlLabel>Please select one of the following: </ControlLabel> 
     <FormControl componentClass="select" placeholder="select"> 

      <option value="select"></option> 
      <LinkContainer to={`${match.url}/test`} > 
       <option value="select">TEST</option> 
      </LinkContainer> 
     </FormControl> 
</FormGroup> 

<Route exact path={`${match.url}/test`} component={Test}/>

你有没有在任何父母onChange事件？ –

答

目前您尝试呈现在你的选择框中的链接和那不是去上班。

阵营路由器的<Link>等都创建正确的URL对你的一个标签。你需要做的是创建一个合适的<select>并在其中包含<option>。并在<select>处理onChange事件并从onChange处理程序中重定向您的应用程序。无论是通过window.location = "/your/new/page"，或者如果你想在你内部路由内部SPA从反应路由器（更多在here）掌握历史对象。

http://jsbin.com/misewekida/1/edit?js,output

class HelloWorldComponent extends React.Component { 
    onUrlSelected(e){ 
    console.log(e.currentTarget.value); 
    //Navigate using 'window.location =' here or use 
    //react routers "withRouter" to access the history and history.push("/your/local/url") 
    } 

    render() { 
    return <select onChange={this.onUrlSelected}> 
     <option value="www.google.com">Label 1</option> 
     <option value="/some/internal/url/as/value">Label 2</option> 
    </select>; 
    } 
} 

React.render(
    <HelloWorldComponent/>, 
    document.getElementById('react_example') 
);

1）我知道这个答案并不包括如何从一个甚至处理程序中导航的详细方法，但是从版本的API修改版本中反应，路由器，进去他们的文档按我的建议，并阅读他们如何为您的版本。与v4一样，它建议withRouter HOC。

2）另一种选择可能是不创建一个选择框，但只是一个链接列表和风格它自己，那么里面的工作，但如果你需要一个选择则是这种方式比较靠前。

reactjs：与FormGroup的选择框，当选择一个选项时如何路由到其他页面

相关推荐