Реализация реакционных хуков useState в материале-ui Tab контейнер не работает - PullRequest
Новая
       18

Реализация реакционных хуков useState в материале-ui Tab контейнер не работает

1 голос
/ 29 марта 2019

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

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

1 Ответ

3 голосов
/ 29 марта 2019

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

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

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

Edit Tabs useState

...