Блог

Я работаю над 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>
    );
  }
}
  

Нажав кнопку «Принять», как я могу передать карточку с новой вкладки на текущую вкладку?

Я работаю над ReactJS и задавался вопросом, как я могу передавать значение между вкладками.

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

Если я правильно понимаю ваш вопрос, вы хотите повторно использовать разметку карты для каждой вкладки, а также разрешить навигацию между вкладками с помощью той же разметки карты.

Одним из способов добиться этого было бы определить такой метод, как 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>
        );
    }
}