Изменение вкладок семантического интерфейса при нажатии одной кнопки в другом компоненте - PullRequest
Новая
       6

Изменение вкладок семантического интерфейса при нажатии одной кнопки в другом компоненте

0 голосов
/ 17 мая 2018

У меня есть следующий код в моем компоненте, где A nad B - мои другие компоненты, а SomeComponent - то, где я рендеринг A и B вместе с компонентом TabExampleSecondaryPointing. 

import { Tab } from 'semantic-ui-react';

const panes = [
  { menuItem: 'A', render: () => <Tab.Pane attached={false}> <A/> </Tab.Pane> },
  { menuItem: 'B', render: () => <Tab.Pane attached={false} > <B/> </Tab.Pane> },
]

const TabExampleSecondaryPointing = () => (
   <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
)

class SomeComponent extends Component {
  render() {
      return (
        <div>
           <TabExampleSecondaryPointing />
        </div>
      );
  }
}

То, что я хочу сделать, - это когда я нажимаю какую-то кнопку внутри компонента A (который в данный момент активен на вкладке A), текущая или активная вкладка должна переключиться на вкладку B.Я использую вкладки компонента Semantic UI для React.Любая помощь приветствуется.Спасибо.

1 Ответ

0 голосов
/ 23 мая 2018

@ Vibhor в интересах того, чтобы кто-то еще воспользовался этим ответом и, возможно, помог вам улучшить ваше решение, я бы посоветовал вам взглянуть на контролируемые примеры для вкладок наДокументация SUIR .

То, что вы предложили и внедрили в качестве решения, определенно является обходным решением.Вы используете DOM для имитации события щелчка, чтобы изменить автоматически контролируемое состояние этого компонента.То, что вы хотите сделать, это непосредственно контролировать это состояние самостоятельно.Из коробки многие SUIR-компоненты сами обрабатывают состояние.

Я собрал для вас пример CodeSandbox, демонстрирующий, как это будет работать с состоянием внутреннего компонента, распространяющегося на пример в документации SUIR:

https://codesandbox.io/s/k9ozm3w5n7

import React, { Component } from "react";
import { render } from "react-dom";
import { Button, Container, Tab } from "semantic-ui-react";

class TabExampleActiveIndex extends Component {
  state = { activeIndex: 1 };

  handleRangeChange = e => this.setState({ activeIndex: e.target.value });
  handleTabChange = (e, { activeIndex }) => this.setState({ activeIndex });

  render() {
    const { activeIndex } = this.state;

    const panes = [
      {
        menuItem: "Tab 1",
        render: () => (
          <Tab.Pane>
            Tab 1 Content{" "}
            <Button
              content="Tab 2"
              onClick={this.handleRangeChange}
              value={1}
            />
          </Tab.Pane>
        )
      },
      {
        menuItem: "Tab 2",
        render: () => (
          <Tab.Pane>
            Tab 2 Content{" "}
            <Button
              content="Tab 3"
              onClick={this.handleRangeChange}
              value={2}
            />
          </Tab.Pane>
        )
      },
      {
        menuItem: "Tab 3",
        render: () => (
          <Tab.Pane>
            Tab 3 Content{" "}
            <Button
              content="Tab 1"
              onClick={this.handleRangeChange}
              value={0}
            />
          </Tab.Pane>
        )
      }
    ];

    return (
      <div>
        <div>activeIndex: {activeIndex}</div>
        <input
          type="range"
          max="2"
          value={activeIndex}
          onChange={this.handleRangeChange}
        />
        <Tab
          panes={panes}
          activeIndex={activeIndex}
          onTabChange={this.handleTabChange}
        />
      </div>
    );
  }
}

export default TabExampleActiveIndex;
...