Close collapse panel onClick - Ant Design Collapse
So make the panel close automatically after clicking on the button using onClick
function. I found this useful post but I have no idea what went wrong after adding into my code.
Here's my custom collapse
code in ./CustomCollapse.js:
const CustomCollapse = (props) => {
const [open, setOpen] = useState(true);
useEffect(() => {
setOpen(props.isOpened)
}, [props.isOpened])
const setFun1= () => setDisabled(prev => !prev);
const setFun2= () => () => setOpen(prev => !prev);
const combineFunc = () =>{
setFun1();
setFun2();
}
return (
<StyledCollapse activeKey={open} onChange={combineFunc()}>
<AntCollapse.Panel
header={props.header}
key="1"
showArrow={false}
bordered={false}
extra={
<span>
<span style=>
{followed ? <div id={styles.emptyBox}><p>+10</p></div> : <img src={tickIcon} alt="" style= />}
{disabled ? <div id={styles.themeBox}><p>+10</p></div> : <img src={arrowDownIcon} alt="" style= />}
</span>
</span>
}
>
{props.children}
</AntCollapse.Panel>
</StyledCollapse>
);
};
Here's where I want to change the state which is in ./FollowTelegram.js:
const [open, setOpen] = useState(["1"]);
const handleSubmit = () => {
setOpen([]);
}
//{...somecode}
<AntCollapse isDisabled={disabledCollapse} isFollowed={followed} isOpened={open} id={styles.telegramHeader1} header="Follow XXX on Telegram Announcement Channel">
<Row type='flex' align='middle' justify='center'>
//Here's where I change the state
<Button onClick={() => {setFollowed(); toggleDisabledCollapse(); handleSubmit();}} style={buttonStyle2} disabled={clicked}>Continue</Button>
</Row>
</AntCollapse>
from Recent Questions - Stack Overflow https://ift.tt/31g1Whh
https://ift.tt/eA8V8J
Comments
Post a Comment