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