在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