在 material-ui 选项卡容器中实现反应挂钩 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 尝试了控制台日志，它 returns undefined onChange

Answer 1

我看到的主要问题是

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

应该改为：

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

本例中的 event 只是一个点击事件，target 将是被点击的特定 DOM 元素，它可以是几个元素中的任何一个（例如 span，按钮）组成 Tab。与 input 元素不同，Tab 中 DOM 个元素的 none 有一个 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 Callback fired when the value changes. Signature: function(event: object, value: number) => void

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

在 material-ui 选项卡容器中实现反应挂钩 useState 不工作

Implementing react hooks useState in material-ui Tab container not working

tabs

reactjs

material-ui

react-hooks