在 React 组件中使用 Material UI 选项卡 handleChange function 中的 onChange

Question

Currently I have a certain navigation setup like this:

      <div>
        {letters?.map((letter) => {
          return (
            <button
              type="button"
              key={item.value}
              data-active={value === item.value}
              onClick={() => {
                if (onChange) {
                  onChange(item.value);
                }
              }}
            >
              {item.label}
            </button>
          );
        })}
      </div>

I want to change it, to use Material UI tabs .

I have the following:

const MyComponent = ({ firstLetters }: Props) => {
  const [value, setValue] = useState(0);

  const handleChange = (_event: React.ChangeEvent<{}>, newValue: string) => {
    console.warn(newValue);
    setValue(newValue);
  };

  return (
        <Tabs css={styles.tabsRoot} value={value} onChange={handleChange}>
          {firstLetters?.map((item) => {
            return (
              <Tab
                key={item.value}
                label={item.label}
                disableRipple
              />
            );
          })}
        </Tabs>
  )
};

How do I use onChange like my previous onClick function callback into the handleChange function?

Answer 1

According to the MUI docs , you should have value and onChange props in the Tabs component. So, you should remove the onClick prop from the Tab components, and add the aforementioned Tabs props like so:

<Tabs value={value} onChange={handleChange}>
  {letters?.map((item) => {
    return (
      <Tab
        key={item.value}
        label={item.label}
        disableRipple
        value={item.value}
      />
    );
  })}
</Tabs>