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>

React.js antdesign antd
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();
    }
}

Previous: How do I dynamically add the value of the a tag rel attribute?

Next: What is the complete upload and update process of git?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu