나는 토글 버튼을 짓고 있어요 및 사양은 토글 버튼의 그룹은 한 번의 클릭 (수 있도록 동작을해야한다고 하더군요 예 참조 )과 여러 번의 클릭으로 ( 예 참조 ).
구현할 논리가 많지 않기 때문에 다중 클릭은 괜찮지 만 한 번의 클릭은 나에게 매우 어렵습니다. 한 번의 클릭을 사용하는 주요 아이디어는 버튼을 토글하고 다른 버튼을 토글하려고하면 이전 버튼은 상태를 잃고 pressed클릭 한 버튼은 버튼을 가져야한다는 것입니다. 때 pressed사실, ToggleButton을 다른 CSS가 있습니다.
이것은 내 토글 버튼 구성 요소입니다.
const ToggleButton = props => {
const { onClick, value, ...other } = props;
const [pressed, setPressed] = useState(true);
const renderPressedButton = () => {
setPressed(!pressed);
if (onClick) {
onClick();
}
};
return (
<StyledToggleButton
className={!pressed ? 'pressed' : null}
pressed={pressed}
data-value={value}
{...other}
onClick={renderPressedButton}
/>
);
};
그리고 이것은 내 래퍼입니다 (atm 나는 내가 클릭하는 클래스 만 얻습니다).
const onClickHandler = e => {
const index = e.target.closest('.pressed');
// console.log(index);
// console.log('classe: ', e.target.className);
if (index) {
console.log('its pressed!');
}
};
const ToggleButtonGroup = props => {
const { ...other } = props;
return <StyledToggleButtonGroup onClick={onClickHandler} {...other} />;
};
Context API를 사용하거나 내 renderPressedButton논리를 내 래퍼 로 옮겨야한다고 생각합니다 . 누구나 아이디어가 있습니까?
그리고 이것이 내가 구성 요소를 사용할 계획입니다.
<ToggleButtonGroup singleClick>
<ToggleButton>One</ToggleButton>
<ToggleButton>Two</ToggleButton>
</ToggleButtonGroup>
상태를 ToggleButtonGroup. 토글 된 인덱스 목록을 ToggleButton유지하고 완전히 상태 비 저장 상태 로 유지 하기 위해 부울을 prop으로 제공합니다 . 이렇게하면 클릭 ToggleButton을 ToggleButtonGroup기반으로 각각을 개별적 으로 제어 할 수 있습니다 .
function ToggleButtonGroup({ singleClick, children }) {
const [checked, setChecked] = React.useState([]);
const handleClick = event => {
// event.target should have your clicked checbox reference
const index = event.target.dataset.index;
if (singleClick) {
setChecked([index]);
} else {
if (checked.includes(index)) {
setChecked(checked.filter(eachIndex => eachIndex !== index));
} else {
setChecked([...checked, index]);
}
}
};
return (
<div onClick={handleClick}>
{React.Children.map(children, (child, index) => {
return React.cloneElement(child, {
dataIndex: index,
pressed: checked.includes(index)
});
})}
</div>
);
}
function ToggleButton({ dataIndex, pressed, ...rest }) {
return <div data-index={dataIndex} className={!pressed ? 'pressed' : null} {...rest} />;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다