사용자가 클릭 한 버튼의 값을 다음 함수를 사용하여 배열에 전달합니다.
const [pizzaSize, setPizzaSize] = useState("Choose your Pizza Size");
const [startPrice, setStartPrice] = useState(0);
const addPizza = (e) => {
setPizzaSize(e.target.name);
setStartPrice(parseInt(e.target.value));
};
동일한 페이지의 다른 버튼으로 이미 수행 한 것처럼 사용자 정의 버튼 구성 요소를 사용하여 켜고 끌 수 있습니다.
const ButtonClickable3 = (props) => {
const [isActive, setActive] = useState("false");
const handleToggle = (e) => {
setActive(!isActive);
props.onClick(e)
};
return <button
type="button"
value={props.value}
className={isActive ? "button btn fourth" : "button btn fourthActive"}
onClick={handleToggle}
>
{props.name}
</button>
}
마지막으로 다음과 같이 함수를 호출합니다.
<ButtonClickable3 name="test" value="5" onClick={(event) => addPizza(event)}></ButtonClickable3>
일반 버튼을 사용하면 기능이 작동하므로 사용자 정의 버튼이 작동하지 않는 이유가 어리둥절합니다.
내 사용자 정의 버튼 1과 2도 작동하지만 다른 기능을 사용하고 있습니다. 여기 에있는 codesandbox에 전체 코드를 넣었 습니다 .
귀하의 도움에 미리 감사드립니다.
원본 <button에는 name속성이 있지만 <ButtonClickable3그렇지 않습니다. 그래서:
setPizzaSize(e.target.name);
와 함께 실패합니다 ButtonClickable3. 다음이 필요합니다.
return <button
type="button"
name={props.name}
value={props.value}
내부 ButtonClickable3.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다