在ReactJS中的onClick事件上的选项卡之间传递值

Question

这是我正在研究的组件。 我有三个名为newOrder，currentOrder和orderHistory的选项卡。

当我按卡上的“接受”按钮时，如何将“新订单”选项卡中的卡移动到“当前订单”选项卡。

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">
        //this is the card with Accept button.
         <div class="card">
            <div class="card-body">          
            <Button type="button>Accept</Button>                     
            </div>
         </div>   
        </Tab>

        <Tab eventKey="currentOrder" title="Current Order"></Tab>

        <Tab eventKey="orderHistory" title="OrderHistory"></Tab>
      </Tabs>
    );
  }
}

Answer 1

这可以通过使用组件状态来实现。 您可以参考以下链接： https ： //reactjs.org/docs/state-and-lifecycle.html