在 React 組件中使用 Material UI 選項卡 handleChange function 中的 onChange

Question

目前我有這樣的導航設置：

      <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>

我想改變它，使用Material UI tabs 。

我有以下內容：

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>
  )
};

如何像我之前的onClick function 回調到handleChange function 一樣使用onChange ？

Answer 1

根據MUI docs ，您應該在Tabs組件中有value和onChange道具。 因此，您應該從Tab組件中刪除onClick道具，並添加上述Tabs道具，如下所示：

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