在ReactJs中将值从一个选项卡传递到另一个选项卡

Question

我正在使用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>

    );

  }

}

Onclicking接受按钮上如何将卡片从NewOrder选项卡传递到currentOrder选项卡？

Answer 1

如果我正确理解了您的问题，那么您想为每个标签重新使用卡片标记，并且还希望通过同一卡片标记在标签之间进行导航。实现该目标的一种方法是定义一种方法，例如renderCard()呈现该通用标记的方法。然后在渲染每个<Tab>组件的内容时调用该方法。还renderCard()需要记住的一点是，可能需要一个参数来指定“接受”按钮导航到哪个选项卡：export default class Driver extends Component {&nbsp; &nbsp; constructor(props, context) {&nbsp; &nbsp; &nbsp; &nbsp; super(props, context);&nbsp; &nbsp; &nbsp; &nbsp; this.state = { key: 'newOrder' };&nbsp; &nbsp; }&nbsp; &nbsp; /* Define render card function. Takes nextKey parameter that controls what tab the Accept button will navigate to */&nbsp; &nbsp; renderCard(nextKey) {&nbsp; &nbsp; &nbsp; &nbsp; return (<div class="card" style={{width:'100%',borderRadius:'2%', border: '4px solid lightgreen'}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body" style={{textAlign:'center'}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="card-title">{'CID'}</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text"><h5>{'RID'}</h5></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button variant="outline-success"onClick={ () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ key : nextKey })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }} style={{width:'33%'}}><i class="fas fa-check-circle fa-lg"></i><br/>Accept</Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button variant="outline-primary" style={{width:'33%'}}><i class="fas fa-book-open fa-lg" fa-lg></i><br/>View</Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>)&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Tabs&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="controlled-tab-example"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeKey={this.state.key}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onSelect={key => this.setState({ key })}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Tab eventKey="newOrder" title="New Order">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { /* Render card, and specify which tab the card's accept button will navigate to */ }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { this.renderCard('currentOrder') }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Tab>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Tab eventKey="currentOrder" title="Current Order">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { /* Render card if this tab visible */ }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { this.renderCard('orderHistory') }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Tab>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Tab eventKey="orderHistory" title="OrderHistory">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { /* Render card if this tab visible */ }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { this.renderCard('newOrder') }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Tab>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Tabs>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}

Answer 2

我正在使用ReactJS，想知道如何在选项卡之间传递值。<Tab my_data={my_data_value} eventKey="orderHistory" title="OrderHistory"></Tab>