javascript - React.js Material-UI：以编程方式从子组件中隐藏父组件选项卡

Question

我正在尝试从子组件中隐藏父组件选项卡。

在下面提供我的代码片段和沙箱

有人可以帮忙吗？任何帮助将不胜感激！

演示：https ://codesandbox.io/s/material-demo-8je9d

我已经包含了下面的代码。

Tab2组件

import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";

function Tab2ComponentFunction(props) {
  const { children, value, index, ...other } = props;

  return <div />;
}

export default function Tab2Component(props) {
  const [value, setValue] = React.useState(2);
  const [Tab2Show, setTab2Show] = useState(false);

  const onTab2Hide = () => {
    alert("onTab2Hide");
    setTab2Show(false);
    setValue(0); //goto tab1
  };

  //const handleChange = (event, newValue) => {
  //  setValue(newValue);
  //};

  return (
    <div>
      <Button className="mr10" variant="light" onClick={() => {}}>
        hide tab 2
      </Button>
      Tab2Component content
    </div>
  );
}

标签： javascripthtmlreactjsreduxreact-hooks

Answer 1

我想我明白你想做什么。

您需要将 setValue 函数（来自 SimpleTabs）传递给 Tab2Component。然后您必须在 onClick 事件期间调用 onTab2Hide。

尝试这个