reactjs 如何将onClick按钮添加到MUI中的任何选项卡?

jdzmm42g  于 2023-01-17  发布在  React
关注(0)|答案(1)|浏览(110)

我想添加onClick按钮(如谷歌翻译中的交换语言)到任何标签。我想像点击谷歌翻译中的Swap languageses -> 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>
uinbv5nw

uinbv5nw1#

你可以在Tab组件中添加一个value属性,这样你就可以切换值,而不是索引。
为此,我们需要更改源和目标的初始状态。

const [value_s, setValue_s] = useState("en");
const [value_t, setValue_t] = useState("es");

现在,可以将value属性添加到Tab组件,与target选项卡相同

<Tabs value={value_s} onChange={handleChange_s}>
  {languages.map((item) => (
    <Tab
      key={item}
      value={item.langcode} // the value
      label={item.Name}
      onClick={() => {
        setSource(item.langcode);
      }}
    />
  ))}
</Tabs>

为按钮创建handleSwap函数

const handleSwap = () => {
  setValue_s(value_t);
  setValue_t(value_s);
};

我们可以这样使用

<IconButton onClick={handleSwap}>

相关问题