Javascript 在ReactJs中将值从一个选项卡传递到另一个选项卡
我正在研究ReactJS,想知道如何在选项卡之间传递值 下面是我正在处理的组件。我有三个标签,我想通过点击接受按钮将卡片从一个标签传递到另一个标签Javascript 在ReactJs中将值从一个选项卡传递到另一个选项卡,javascript,reactjs,Javascript,Reactjs,我正在研究ReactJS,想知道如何在选项卡之间传递值 下面是我正在处理的组件。我有三个标签,我想通过点击接受按钮将卡片从一个标签传递到另一个标签 import React, { Component } from 'react' import DriverPlacedOrder from './DriverPlacedOrder'; import {Link }from 'react-router-dom'; import {Tabs,Tab} from 'react-bootstrap';
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>
);
}
}
import React,{Component}来自“React”
从“/DriverPlacedOrder”导入DriverPlacedOrder;
从'react router dom'导入{Link};
从“react bootstrap”导入{Tabs,Tab};
导出默认类驱动程序扩展组件{
构造函数(道具、上下文){
超级(道具、背景);
此.state={
钥匙:“家”,
};
}
render(){
返回(
this.setState({key})}
>
{CID}
{RID}
接受
视图
);
}
}
单击“接受”按钮后,如何将卡从“新订单”选项卡传递到“当前订单”选项卡
我正在研究ReactJS,想知道如何传递值
在标签之间
如果我正确理解了您的问题,您希望对每个选项卡重复使用卡片标记,并允许通过相同的卡片标记在选项卡之间导航 实现这一点的一种方法是定义一个方法,例如呈现公共标记的
renderCard()
。然后在呈现每个
组件的内容时调用该方法。还需要记住的是,renderCard()
可能需要一个参数来指定“接受”按钮导航到的选项卡:
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>
);
}
}
导出默认类驱动程序扩展组件{
构造函数(道具、上下文){
超级(道具、背景);
this.state={key:'newOrder'};
}
/*定义渲染卡函数。接受nextKey参数,该参数控制“接受”按钮将导航到哪个选项卡*/
渲染卡(下一个键){
返回(
{'CID'}
{'RID'}
{
this.setState({key:nextKey})
}}style={{width:'33%}}>
接受
视图
)
}
render(){
返回(
this.setState({key}}>
{/*渲染卡,并指定卡的“接受”按钮将导航到的选项卡*/}
{this.renderCard('currentOrder')}
{/*如果此选项卡可见,则渲染卡*/}
{this.renderCard('orderHistory')}
{/*如果此选项卡可见,则渲染卡*/}
{this.renderCard('newOrder')}
);
}
}
如果是同一个域,则可以使用localStorage。如果你在寻找实时通信,我也会查看SockIO。实际上,我在寻找传递之前在NewOrder选项卡上的卡,按下accept按钮,卡应该移动到Current Order选项卡,同样按下accept按钮应该将卡从Current Order移动到orderHistory选项卡。任何帮助都将不胜感激@上面的代码应该达到这个效果。也许我误解了你的要求?它会更改选项卡,但不会将卡传递到其他选项卡。如果您在上面看到我的代码,我在NewOrder选项卡中有一张卡。当我点击卡片上的“接受”按钮时,卡片应该从“新订单”选项卡移动到“当前订单”选项卡。然后从CurrentOrder选项卡切换到orderhistory选项卡@我想我是误会了。我的答案中的代码将呈现卡片,以便它在哪个选项卡处于活动状态时可见。单击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>
);
}
}