在material-ui Tab容器中实现react hooks useState不起作用

Question

我正在尝试在 material-ui/tabs 组件中实现 react-hooks useState。我可以使用函数 handleChange 来做到这一点，但我正在尝试学习实现钩子。 useState 适用于输入字段，但不适用于 material-ui 选项卡的 onChange 功能。以下是我的代码：

const [value, setValue] = useState(0)

<Tabs
   value={value}
   onChange={(event) => setValue(event.target.value)}
   variant="scrollable"
   scrollButtons="on"
   indicatorColor="primary"
   textColor="primary"
 >
     <Tab label="All" />
         {subjects.map((subject) => (
             <Tab label={subject.subjectName} />
      ))}
 </Tabs>

我用useEffect尝试了控制台日志，它返回undefinedonChange

Answer 1

我看到的主要问题是

onChange={(event) => setValue(event.target.value)}

应该是：

onChange={(event, newValue) => setValue(newValue)}

在这种情况下，event 只是一个点击事件，target 将是被点击的特定 DOM 元素，它可以是构成 Tab 的多个元素（例如跨度、按钮）中的任何一个。与 input 元素不同，Tab 中的所有 DOM 元素都没有 value 属性，因此 Material-UI 将该值作为单独的参数传递给 onChange 函数。

这是来自Tab 组件的相关代码：

  handleChange = event => {
    const { onChange, value, onClick } = this.props;

    if (onChange) {
      onChange(event, value);
    }

    if (onClick) {
      onClick(event);
    }
  };

您将在Tabs 道具的文档中找到onChange 签名：https://material-ui.com/api/tabs/#props

onChange func 值更改时触发回调。签名：function(event: object, value: number) => void

这是一个基于您的代码的工作示例：