0

在不切换的情况下,怎样可以通过点击上方的按钮来更新Tab1第一个选项里面内容呢

下面是官方demo代码

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>

图片描述

2018-09-27 提问
2 个回答
0
...
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>
0

提供一个思路;
TabPane里的组件定义一个refresh的方法,然后通过ref获取组件实例,直接调用refresh()

class Example extends React.Component {
    constructor() {
        super();

        this.myRef = React.createRef();
    }
    
    render() {
        return (
            <div>
                <Button type="primary" onClick={this.onChange}>update</Button>
                <Tabs defaultActiveKey="1" onChange={this.callback}>
                    <TabPane tab="Tab 1" key="1"><comp ref={this.myRef} /></TabPane>
                </Tabs>
            </div>
        )
    }
    
    onChange = () => {
        this.myRef.current.refresh();
    }
}

撰写答案

你可能感兴趣的

推广链接