Блог

Я пытаюсь реализовать react-hooks useState в компоненте material-ui / tabs. Я могу сделать это с помощью функции handleChange, но я пытаюсь научиться реализовывать хуки. useState работает для поля ввода, но не для функции обмена вкладками material-ui. Ниже приведен мой код:

 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

Основная проблема, которую я вижу, заключается в том, что

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

вместо этого должно быть:

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

event В данном случае это просто событие щелчка, и target щелчком будет конкретный элемент DOM, который может быть любым из нескольких элементов (например, span, button), составляющих Tab . В отличие от input элементов, ни один из элементов 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

Обратный вызов onChange func запускается при изменении значения. Подпись: function(event: object, value: number) => void

Вот рабочий пример, основанный на вашем коде: