IT技术 - 如何使用 onClick 方法通过 react-router 传递props - 吾爱随笔录

如何使用 onClick 方法通过 react-router 传递props

IT技术 reactjs react-router

2021-05-13 08:18:49

我是react的新手，甚至是react-router的新手，我创建了一个react应用程序，其中包含一些路线，但有些路线需要相同的数据（props）。我想在当前页面上按下按钮时通过 onClickEvent 传输这些props。我读到了一些尝试，例如将按钮上的 onClick 侦听器绑定到类似的方法

handleOnClick(){    
  this.props.history.push('/booking')
 ))

重定向到名为“预订”的路线。但是如何将当前页面的单个props或整套props传递给这个新页面？对此有什么解决方案，我如何访问重定向路线上的props？

这是我的 Index.js，很快会添加更多路由：

const routing = (
 <Router>
   <div>
    <Route exact path="/" component={App} />
     <Route path="/booked" component={Booked} />
   </div>
 </Router>
 );

ReactDOM.render(routing, document.getElementById("root"));

路由树应如下所示：我的 App.js 中有一个主视图，用于呈现 BookingItems 的组件。在 Bookingitem 中，我有多个props。当我预订一些项目时，我应该被重定向到我的 Booked.js 组件。

在任何 BookingItems 中，我都有一个按钮，它应该重定向到 Booked.js。

预订项目：

onButtonClick() {
  this.props.history.push("/booked");
 }

render(){
 return(
          <div className="alignCenterDiv">
            <button
              onClick={this.onButtonClick.bind(this)}
              align="center"
              className="buttonBooking"
            >
              Buchen
            </button>
          </div>
)}

预订：在这里，我想访问我在 BookingItems 中或我在预订项目中创建的任何props以将其传递给 Booked。

2个回答

如果您使用重定向：

this.props.history.push('/booking', {
  myProp: this.props.myProp,
  foo: 'bar'
})

然后，在/booking页面中，您可以像这样访问变量：

console.log(this.props.location.state)
/*
  {
    myProp: '...',
    foo: 'bar'
  }
*/

你可以这样做：

你的路线

<Route path="/booking/:id" .../>

点击

handleOnClick(){    
  this.props.history.push('/booking/12345')
 ))

预订组件

componentDidMount(){
  console.log(this.props.match.params.id);
}

对于替代选项，您可以阅读：How to get parameter value from query string

另一种选择（在问题更新后听起来是一个更好的选择）是使用redux（或类似的东西）。当您单击按钮时，您会调度一个操作，将全局状态的selectedBookingItem设置为单击的项目。然后导航（查看react-router-redux）。Booking 组件连接到redux并且 selectedBookingItem 映射到 prop ( mapStateToProps )。

其它你可能感兴趣的问题

上一篇筏板难拆？下一篇使用 React 组件登录 Firebase