Показать содержимое на вкладке нажмите - Реагировать

Question

Я новичок в React и хочу отобразить 2 вкладки, при первом щелчке вкладки должен отображаться холст, а во второй вкладке должен отображаться раскрывающийся список.У меня есть все три на странице прямо сейчас.

Моя страница выглядит следующим образом - 2 вкладки, один раскрывающийся список и один холст.

Как связать div холста на первой вкладке, клик и раскрывающийся список, чтобы показать на второй вкладке клик.

Отредактированный код:

export class Graph extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            Vdata: null,
            Edata: null,
            iconData : iconsData,
            currentIndex: 0 
        }
        this._tabClick = this._tabClick.bind(this);
        this.MainGraphComponent = this.MainGraphComponent.bind(this);
        this.CustomizedGraphComponent = this.CustomizedGraphComponent.bind(this);
    }
CustomizedGraphComponent(){
    return(
        <div className={style.container} style={{ width: '100%', paddingTop:20}}>
            <DropdownButton>
                {
                   //elements
                }
            </DropdownButton>
        </div>
    )
}

MainGraphComponent(){
    <div ref={(n) => {
        this.graphContainer = n;
        return;
    }} id="container"
    style={{height: '100%', width: '100%'}}
    />
}

 _tabClick(clickedIndex) {
        const {currentIndex} = this.state.currentIndex;
        if(clickedIndex !== currentIndex) {
            this.setState({currentIndex: clickedIndex })
        }
    }


render (){
 return (

                   <div className={style.container} style={{height: '100%', width: '100%'}}>
            <Tabs
                tabs={[
                    {
                        name: 'Main Graph',
                        title: 'Main Graph',
                        component: <this.MainGraphComponent/>
                    },
                    {
                        name: 'Customized Graph',
                        title: 'Customized Graph',
                        component:<this.CustomizedGraphComponent/>
                    }
                ]}
                onTabClick={this._tabClick}

            />
        </div>

    );
 }

Answer 1

Когда я использовал вкладки в прошлом, я использовал React Tabs .Это действительно легко раскрутить и приступить к работе, и позволит вам изменить некоторые функциональные возможности в соответствии с вашими потребностями, а также стилизовать их так, как вы хотите.Он поставляется с функциональностью переключения вкладок по умолчанию, но вы можете настроить его для использования локального состояния для обработки переключения для большего контроля.Все инструкции о том, как это сделать, находятся в ссылке.

Answer 2

Я сделал так, чтобы отобразить требуемый компонент на основе индекса вкладок.Этот индекс сохраняется в состоянии и изменяется при каждом нажатии на вкладку.Пример кода

<Tabs
    tabs=[
        {
            name: 'Main Graph',
            title: 'Main Graph',
            component: <YourGraphComponent/>
         },
         {
             name: 'Customized Graph',
             title: 'Customized Graph',
             component: <YourCustomizedGraphComponent/>
         }
        ]
        /*
          Assuming Tabs is a component, no need to specify a click handler unless
          you want to add some custom handling.
          onTabClick={this._onSelect}
        */
/>

и затем в ваших вкладках компонент

this.state={
    currentIndex: 0 //or get the default from the parent
}

_tabClick(clickedIndex) {
    const {currentIndex} = this.state;
    if(clickedIndex !== currentIndex) {
        this.setState({currentIndex: clickedIndex });
    }
}

render() {
  return (<div>
      {/*Basic code to render the tabs and attach click handlers to it based on index*/}
      {this.props.tabs.map((tab, index) => {
        return (<div onClick={this._tabClick.bind(index)}>
            tab.label
        </div>);
      })}
      {/*component fetched from the tabs array based on the current index*/}
      {this.props.tabs[this.state.currentIndex].component}
  </div>);
  }
}

Answer 3

Рассматриваете ли вы использование состояний?Например, для отображения раскрывающегося списка можно установить значение состояния, которое изначально не имеет значения, и при нажатии на вкладку вы устанавливаете состояние, чтобы изменить значение.