在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 {

    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>

        );

    }

}

Answer 2

我正在使用ReactJS，想知道如何在选项卡之间传递值。

<Tab my_data={my_data_value} eventKey="orderHistory" title="OrderHistory">

</Tab>