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

Question

我正在尝试在material-ui/tabs组件中实现react-hooks useState。我可以使用函数handleChange来做到这一点，但我正在尝试学习实现钩子。useState 适用于输入字段，但不适用于材料 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元素不同，Material-UI 中的任何 DOM 元素都Tab没有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

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

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