我想添加onClick按钮(如谷歌翻译中的交换语言)到任何标签。我想像点击谷歌翻译中的Swap languages
到es -> en
等其他语言。
const [value_s, setValue_s] = useState('one');
const [value_t, setValue_t] = useState('four');
const handleChange_s = (event, newValue) => {
setValue_s(newValue);
};
const handleChange_t = (event, newValue) => {
setValue_t(newValue);
};
<Tabs
value={value_s}
onChange={handleChange_s}
>
{languages.map((item) => (
<Tab key={item} label={item.Name} onClick={() => { setSource(item.langcode) }} />
))}
</Tabs>
{/* Swap languages Button*/}
<Tooltip title="Swap languages">
<IconButton
onClick={() => { setSource(target), setTarget(source) }}
>
<SwapHorizIcon />
</IconButton>
</Tooltip>
<Tabs
value={value_t}
onChange={handleChange_t}
textColor="secondary"
indicatorColor="secondary"
>
{languages.map((item) => (
<Tab key={item} label={item.Name} onClick={() => { setTarget(item.langcode) }} />
))}
</Tabs>
1条答案
按热度按时间uinbv5nw1#
你可以在
Tab
组件中添加一个value
属性,这样你就可以切换值,而不是索引。为此,我们需要更改源和目标的初始状态。
现在,可以将
value
属性添加到Tab
组件,与target
选项卡相同为按钮创建
handleSwap
函数我们可以这样使用