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

因此，我假设您想说的是，您的tabs元素之外有一个按钮，并且您只想在选择一个标签时才显示这些按钮。

我会将所选标签存储在某个位置的状态：

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

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

implementation 'com.github.bumptech.glide:glide:4.9.0'

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

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>
  );
};

对于更复杂的解决方案，我建议使用路由器，例如Reach Router。路由器既处理呈现/显示的内容，又处理URL路径（因此，您将拥有专用的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> ); } };和/tab1路径，或者您选择的称为它们的路径）。

Answer 4

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

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

4 个答案: