changed logic when click on Antd Tab REACT

user_17388565 0
Viewed 319

I'm using antd version 3 and want to change the outcome onChange when Tab is clicked. Here the picture of my desire objective enter image description here

My tab title has a checkbox. Outcome should be in this way: when user is stand at Tab1 should have a possibility to change value checkbox of Tab2 or Tab3 without setting active Tab or moving to Tab2 or Tab3. I have read that tab didn't support HOC... I tried a lot of ways to solve but didn't work out with that. event.PreventDefault / event.stopPropagation similarly result. Even if handlers like onTabClick / onChange didn't set active Tab with a new key after checked checkbox active key is old but tab is render with new information.

Here example of custom tab title component with some extract from code

    <Tabs
     defaultActiveKey={'Tab 1'}
     onChange={(key) => onChangeHandler(key)}
     onTabClick={(key: string, event: MouseEvent) => onTabClick(key, event)}
    >
        <TabPane
          tab={<Header name={'Tab1'} />}
          key={'Tab 1'}
        />
        <TabPane
          tab={<Header name={'Tab 2'}  />}
          key={'Tab 2'}
        />
        <TabPane
          tab={<Header name={'Tab 3'} />}
          key={'Tab 3'}
        />

    const Header = ({
     name,
     onChange,
     isActive,
     id,
     }) => {
     return (
        <div>
            <Checkbox
            isActive={isActive}
            value={id}
            checked={isActive}
            onChange={onChange}
            />
            <Title >{name}</Title>
        </div>
       )
      }
antd reactjs tabs
1 Answers

As far as I understand you want the tabs not to change when you click on the check box. To do this, you can pass the onClick function to the Checkbox and stop the event bubbling there

const Header = ({ name, onChange, isActive, id }) => {
  return (
    <div>
      <Checkbox
        isActive={isActive}
        value={id}
        checked={isActive}
        onChange={onChange}
        onClick={(e) => {
          e.stopPropagation();
        }}
      />
      <Title>{name}</Title>
    </div>
  );
};
user_142077200
Related