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

Posted 2023-02-22

【中文标题】在material-ui Tab容器中实现react hooks useState不起作用

【英文标题】：Implementing react hooks useState in material-ui Tab container not working

【发布时间】：2019-08-20 14:28:44

【问题描述】：

我正在尝试在 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

【参考方案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

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

【讨论】：

感谢您的帮助！我仍然不明白为什么我们需要 newValue 在这个而不是在输入字段中。你能帮我解决这个问题吗？

@SujanJoshi 我在回答中添加了一些额外的信息。