在Material-UI Tab容器中实现React钩子useState无效

Question

我正在尝试在material-ui / tabs组件中实现react-hooks useState。我可以使用handleChange函数来做到这一点，但是我试图学习实现钩子。 useState适用于输入字段，但不适用于材质用户界面选项卡的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的控制台日志，它返回undefined onChange

Answer 1

我看到的主要问题是

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

应该是：

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

在这种情况下，event只是一个单击事件，而target将是被单击的特定DOM元素，它可以是构成该元素的多个元素（例如，span，button）中的任何一个。 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);
    }
  };

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

  

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

这是一个基于您的代码的有效示例：