홈페이지에 표시되는 배열에 항목을 추가하는 앱이 있습니다. 값을 기반으로 항목을 표시하고 해당 값이 배열에있을 때 강조 표시되는 버튼을 만들려고합니다.
여기에 버튼 구성 요소가 있습니다.
const ButtonClickable = (props) => {
const [isActive, setActive] = useState("false");
const handleToggle = () => {
setActive(!isActive);
};
return <button
type="button"
value={props.value}
className={isActive ? "button btn first" : "button btn firstActive"}
onClick={handleToggle}
>
{props.name}
</button>
}
그리고 저는 이것을 이렇게 사용하고 있습니다
<ButtonClickable onClick={(event) => {ToppingPlusMinus(event)}} name="Cheese" value="Cheese, " ></ButtonClickable>
그리고 다음과 같은 기능으로 가치를 모으고 있습니다.
const ToppingPlusMinus = (e) => {
const { value } = e.target;
const position = toppings.indexOf(value);
if (position !== -1) {
return removeTopping(value);
}
return addTopping(value);
};
const removeTopping = (value) => {
// We need to filter out the value from the array and return the expected new value
setToppings(toppings.filter((topping) => topping !== value));
handleToggle();
};
이 함수는 값이 다음과 같이 동일한 구성 요소에 하드 코딩 된 경우 제대로 작동합니다.
<button
type="button"
value="Peperoni, "
className={ isActive ? "button btn first" : "button btn firstActive"}
onClick={(event) => {
ToppingPlusMinus(event);
}}
>
Pepperoni
</button>
<buttonClickable>구성 요소를 사용할 때 값이 배열에 추가되지 않고 그 이유가 확실하지 않습니다.
전체 작업 코드 샌드 박스는 여기에 당신의 도움에 미리 감사드립니다.
전달한 onClick 소품을 호출하지 않고 다음과 같이 클릭 처리기를 변경합니다.
const handleToggle = (e) => {
props.onClick(e)
setActive(!isActive);
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다