[英]Pass value from one tab to another tab in ReactJs
我正在研究ReactJS,並想知道如何在選項卡之間傳遞值。
以下是我正在處理的組件。 我有三個標簽,並希望通過單擊接受按鈕將卡從一個標簽傳遞到另一個標簽。
import React, { Component } from 'react'
import DriverPlacedOrder from './DriverPlacedOrder';
import {Link }from 'react-router-dom';
import {Tabs,Tab} from 'react-bootstrap';
export default class Driver extends Component {
constructor(props, context) {
super(props, context);
this.state = {
key: 'home',
};
}
render() {
return (
<Tabs
id="controlled-tab-example"
activeKey={this.state.key}
onSelect={key => this.setState({ key })}
>
<Tab eventKey="newOrder" title="New Order">
<div class="container">
<div class="card" style={{width:'100%',borderRadius:'2%', border: '4px solid lightgreen'}}>
<div class="card-body" style={{textAlign:'center'}}>
<h4 class="card-title">{CID}</h4>
<p class="card-text"><h5>{RID}</h5></p>
<Button variant="outline-success"onClick={} style={{width:'33%'}}><i class="fas fa-check-circle fa-lg"></i><br/>Accept</Button>
<Button variant="outline-primary" style={{width:'33%'}}><i class="fas fa-book-open fa-lg" fa-lg></i><br/>View</Button>
</div>
</div>
</div>
</Tab>
<Tab eventKey="currentOrder" title="Current Order">
</Tab>
<Tab eventKey="orderHistory" title="OrderHistory">
</Tab>
</Tabs>
);
}
}
單擊“接受”按鈕如何將卡從NewOrder選項卡傳遞到currentOrder選項卡?
我正在研究ReactJS,並想知道如何在選項卡之間傳遞值。
<Tab my_data={my_data_value} eventKey="orderHistory" title="OrderHistory">
</Tab>
如果我正確理解您的問題,您希望為每個選項卡重復使用卡片標記,並允許通過相同的卡片標記在選項卡之間進行導航。
實現這一目標的一種方法是定義一個渲染公共標記的renderCard()
方法。 然后在渲染每個<Tab>
組件的內容時調用該方法。 需要記住的是, renderCard()
可能需要一個參數來指定“Accept”按鈕導航到哪個選項卡:
export default class Driver extends Component {
constructor(props, context) {
super(props, context);
this.state = { key: 'newOrder' };
}
/* Define render card function. Takes nextKey parameter that controls what tab the Accept button will navigate to */
renderCard(nextKey) {
return (<div class="card" style={{width:'100%',borderRadius:'2%', border: '4px solid lightgreen'}}>
<div class="card-body" style={{textAlign:'center'}}>
<h4 class="card-title">{'CID'}</h4>
<p class="card-text"><h5>{'RID'}</h5></p>
<Button variant="outline-success"onClick={ () => {
this.setState({ key : nextKey })
}} style={{width:'33%'}}><i class="fas fa-check-circle fa-lg"></i><br/>Accept</Button>
<Button variant="outline-primary" style={{width:'33%'}}><i class="fas fa-book-open fa-lg" fa-lg></i><br/>View</Button>
</div>
</div>)
}
render() {
return (
<Tabs
id="controlled-tab-example"
activeKey={this.state.key}
onSelect={key => this.setState({ key })}>
<Tab eventKey="newOrder" title="New Order">
<div class="container">
{ /* Render card, and specify which tab the card's accept button will navigate to */ }
{ this.renderCard('currentOrder') }
</div>
</Tab>
<Tab eventKey="currentOrder" title="Current Order">
<div class="container">
{ /* Render card if this tab visible */ }
{ this.renderCard('orderHistory') }
</div>
</Tab>
<Tab eventKey="orderHistory" title="OrderHistory">
<div class="container">
{ /* Render card if this tab visible */ }
{ this.renderCard('newOrder') }
</div>
</Tab>
</Tabs>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.