About the use of Tabs tabs

how can I update the contents of the first option of Tab1 by clicking the button above without switching

here is the official demo code

https://codesandbox.io/s/ry681pj8vn
<div>
    <Button type="primary">update</Button>
    <Tabs defaultActiveKey="1" onChange={this.callback}>
      <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
      <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
      <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
    </Tabs>
  </div>

Jul.19,2021

...
state = {
    data: 1,
}

onChange = () => {
    this.setState({
        data: 2,
    })
}
...
<div>
    <Button type="primary" onClick={this.onChange}>update</Button>
    <Tabs defaultActiveKey="1" onChange={this.callback}>
      <TabPane tab="Tab 1" key="1">{this.state.data}</TabPane>
      <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
      <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
    </Tabs>
  </div>

provides an idea;
defines a refresh method for the components in TabPane , then obtains the component instance through ref , and calls refresh ()

directly.
<comp ref={this.myRef} /></TabPane>
                </Tabs>
            </div>
        )
    }
    
    onChange = () => {
        this.myRef.current.refresh();
    }
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be37a1-316a1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be37a1-316a1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?