React - 仅在一个选项卡中显示按钮

Question

我有一个带有一些按钮和标签的父组件。我希望按钮不会出现在其中一个标签中。这似乎很简单，但我不知道如何实现这一点。

请考虑以下代码：

import React from 'react';
import {Tabs, Tab} from '../components';

class Parent extends React.Component {


constructor(props) {
    super(props)

    this.state = {
        editMode: false, 
        showButtons: true
    }
}

showEditOption = () => { this.setState({ editMode: true }) }
hideEditOption = () => { this.setState({ editMode: false}) }

render() {
    return (
        <React.Fragment>
            <div title="Company">
                {this.state.showButtons 
                ? !this.state.editMode ?
                    <button onClick={this.showEditOption}>Edit</button>
                    :
                    <React.Fragment>
                        <button onClick={this.hideEditOption} >Cancel</button>
                        <button disabled={disabled} onClick={this.handleFormSubmit} >Save</button>
                    </React.Fragment>
                : null 
                }
            </div>

            <Tabs startingKey="company" className={styles.tabs}>
                <Tab label='company' key='company'>
                    content 1 // show buttons here
                </Tab>
                <Tab label='users' key='users'>
                    content 2 // and not here
                </Tab>
            </Tabs>
        </React.Fragment>
    )
}

}

我怎样才能做到这一点？谢谢 ：）

Answer 1

所以，我假设你想说的是你的标签元素外面有一个按钮，你只想在选择一个标签时显示这些按钮。

我会将选定的选项卡存储在某个地方：

this.state = {
  editMode: false,
  showButtons: true,
  selectedTab: ''
}

仅在选择特定选项卡时显示按钮：

 {this.state.showButtons && this.state.selectedTab === 'company'
        ? !this.state.editMode ?
          <button onClick={this.showEditOption}>Edit</button>
          :
          <React.Fragment>
            <button onClick={this.hideEditOption} >Cancel</button>
            <button disabled={disabled} onClick={this.handleFormSubmit} >Save</button>
          </React.Fragment>
        : null
      }

最后修改Tabs元素以更改选项卡更改的状态：

<Tabs startingKey="company" className={styles.tabs} onSelect={key => this.setState({ selectedTab: key })} >

希望这是你想要的。

Answer 2

您可以传递属性以判断按钮是否可见。创建组件时，请传递'isNotVisible'属性

constructor(props){
  this.state = {
    editMode: false
  }
}
{if(!this.props.isNotVisible){ 
`<div title="Company">
  {this.state.editMode 
  ? <button>edit</button>
  : <button>cancel</button>
    <button>save</button>}
</div>

<tabs>
  <tab>content of tab 1</tab> // I want the buttons to appear here
  <tab>content of tab 2</tab> // and not here
</tabs>
`}}

Answer 3

对于按钮不显示在其中一个选项卡上放置事件处理的方式，当您导航到不需要显示按钮的选项卡时，您同时将显示按钮的状态更改为false

Answer 4

如果我已正确理解您的问题，您可以在选项卡上使用点击处理程序，然后有条件地显示或隐藏每个选项卡的内容：

const Tabs = props => {
  const { children } = props;

  return <div className='tabs'>{children}</div>;
};

const Tab = props => {
  const { children, clickHandler } = props;

  return <div onClick={clickHandler} className='tab'>{children}</div>;
};

const TabContent = props => {
  const { children, show } = props;

  return show ? <div className='tabContent'>{children}</div> : null;
};

const App = props => {
  const [ tabIdx, setTabIdx ] = useState(0);
  const switchTab = tabIdx => setTabIdx(tabIdx);

  return (
    <React.Fragment>
      <Tabs>
        <Tab clickHandler={() => switchTab(0)}>
          First tab
        </Tab>
        <Tab clickHandler={() => switchTab(1)}>
          Second tab
        </Tab>
      </Tabs>
      <TabContent show={tabIdx === 0}>
        First content
      </TabContent>
      <TabContent show={tabIdx === 1}>
        Second content
      </TabContent>
    </React.Fragment>
  );
};

或者如果您愿意，使用类组件而不是新的Hooks语法使用相同的想法：

class App extends React.Component {
  state = { tabIdx: 0 };

  switchTab = tabIdx => this.setState({ tabIdx });

  render() {
    return (
      <React.Fragment>
        <Tabs>
          <Tab clickHandler={() => this.switchTab(0)}>
            First tab
          </Tab>
          <Tab clickHandler={() => this.switchTab(1)}>
            Second tab
          </Tab>
        </Tabs>
        <TabContent show={this.state.tabIdx === 0}>
          First content
        </TabContent>
        <TabContent show={this.state.tabIdx === 1}>
          Second content
        </TabContent>
      </React.Fragment>
    );
  }

};

对于更复杂的解决方案，我建议使用路由器，例如Reach Router。路由器处理渲染/显示的内容以及URL路径（因此您将拥有专用的/tab1和/tab2路径，或者您选择调用它们的任何路径）。