url更改时如何重置材质ui选项卡？

Question

我在子组件中使用 material-ui 选项卡，每次 URL 更改时都需要重新呈现选项卡。 url 结构类似于：

/in/:id

我的简化代码如下所示（如果示例中没有包含 var，请忽略）：

class Header extends Component {

  constructor(props){
     super(props);
     this.state = {
     selectedTab: 0
    }
   }
   componentWillReceiveProps(nextProps){
     this.setState({selectedTab: 0});
   }
   render(){

     return (
      <Tabs
       tabItemContainerStyle={style.tabItem}
       className="active-tab-bar tabs"
       initialSelectedIndex={this.state.selectedTab}
      >
      <Tab
        containerElement={<Link to={`/in/${currentClient.id}/timeline`}/>}
        to={`/in/${currentClient.id}/timeline`}
        icon={<FontIcon className="material-icons">playlist_add_check</FontIcon>} />
      <Tab
       containerElement={<Link to=
       {`/in/${currentClient.id}/website`}/>}
       to={`/in/${currentClient.id}/website`}
       icon={<FontIcon className="material-icons">web</FontIcon>} />
      </Tabs>
     )

}
export default withRouter(connect(null, {selectClient})(Header));

我尝试使用 connectWillReceiveProps 将所选索引重置为 0，但选项卡会在 url 更改后保持选择。有什么想法如何在每次 url 更改时重置标签？

Answer 1

您需要将您的 Tabs 转换为受控组件。

render(){

     return (
      <Tabs
       value={this.state.selectedTab}
       onChange={(value)=>this.setState({selectedTab:value})}
       tabItemContainerStyle={style.tabItem}
       className="active-tab-bar tabs"
       initialSelectedIndex={this.state.selectedTab}
      >
      <Tab value=0
        containerElement={<Link to={`/in/${currentClient.id}/timeline`}/>}
        to={`/in/${currentClient.id}/timeline`}
        icon={<FontIcon className="material-icons">playlist_add_check</FontIcon>} />
      <Tab value=1
       containerElement={<Link to=
       {`/in/${currentClient.id}/website`}/>}
       to={`/in/${currentClient.id}/website`}
       icon={<FontIcon className="material-icons">web</FontIcon>} />
      </Tabs>
     )

}

Answer 2

看起来选项卡道具仅用于初始： “initialSelectedIndex”，您需要将活动选项卡带到您的控件中。 将 initialSelectedIndex 替换为：

value={this.state.value}
onChange={this.handleChange}

并添加：

  constructor(props) {
    super(props);
    this.state = {
      value: 'a',
    };
  }

  handleChange = (value) => {
    this.setState({
      value: value,
    });
  };

现在您可以在 willreciveprops 中的 url 更改时更改活动选项卡...

完整示例：（来自：http://www.material-ui.com/#/components/tabs）

import React from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';`enter code here`

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
};

export default class TabsExampleControlled extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: 'a',
    };
  }

  handleChange = (value) => {
    this.setState({
      value: value,
    });
  };

  render() {
    return (
      <Tabs
        value={this.state.value}
        onChange={this.handleChange}
      >
        <Tab label="Tab A" value="a">
          <div>
            <h2 style={styles.headline}>Controllable Tab A</h2>
            <p>
              Tabs are also controllable if you want to programmatically pass them their values.
              This allows for more functionality in Tabs such as not
              having any Tab selected or assigning them different values.
            </p>
          </div>
        </Tab>
        <Tab label="Tab B" value="b">
          <div>
            <h2 style={styles.headline}>Controllable Tab B</h2>
            <p>
              This is another example of a controllable tab. Remember, if you
              use controllable Tabs, you need to give all of your tabs values or else
              you wont be able to select them.
            </p>
          </div>
        </Tab>
      </Tabs>
    );
  }
}