在React组件中使用材质UI选项卡中的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>

我想改变它，使用材质UI选项卡。

我有以下内容:

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

我如何使用onChange像我以前的onClick函数回调到handleChange函数?

Answer 1

根据MUI文档，在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>