onSubmit을 통해 클릭한 요소 알아내기

지금까지는 button의 클릭 이벤트를 통해 데이터를 저장해봤는데 form 태그를 이용하여 데이터 저장을 구현해봤습니다.

그런데 막힌 부분이 버튼으로 추가 버튼과 업데이트 버튼이 있는데 각각을 어떻게 처리하는지였습니다.

그래서 간단한 코드를 통해 버튼을 어떻게 가져올지 생각해봤습니다.

일단 onSubmit을 통해 가져오는 이벤트 객체가 무엇인지 먼저 알아봅시다.

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(e);
}

<form onSubmit={handleSubmit}>
    <input type='text' value={newFruit} onChange={(e) => setNewFruit(e.target.value)}/>
    <button>addFruit</button>
    <input type='text' value={newFood} onChange={(e) => setNewFood(e.target.value)}/>
    <button>addFood</button>
</form>

addFruit 버튼을 눌렀을 때입니다.

이벤트 객체에서 nativeEvent에 submitter에 커서를 올리면 눌린 버튼이 표시됩니다.

submitter 토글을 열어 더 살펴보니

이렇게 id와 name 등 속성값을 가져올 수 있다는 것을 알았습니다.

<form onSubmit={handleSubmit}>
    <input type="text" value={newFruit} onChange={(e) => setNewFruit(e.target.value)} />
    <button name="addFruit">addFruit</button>
    <input type="text" value={newFood} onChange={(e) => setNewFood(e.target.value)} />
    <button name="addFood">addFood</button>
</form>

각 input에 name의 속성값을 주고 다시 한번 console을 출력해봤습니다.

이렇게 제가 부여한 속성값이 출력되는 것을 확인할 수 있습니다.

이제 e.target.nativeEvent.submitter.name을 통한 각 값을 통해 실행할 코드를 구현해주면 됩니다.

const handleSubmit = (e) => {
        e.preventDefault();
        if (e.nativeEvent.submitter.name === 'addFruit') {
            setFruit([...fruit, newFruit]);
            setNewFruit('');
        } else {
            setFood([...food, newFood]);
            setNewFood('');
        }
    };

프로젝트 적용

const handleForSubmit = (e) => {
        if (!validateForm()) return;
        const action = e.nativeEvent.submitter.name;
        handleSubmit(e, medalItem, action);
        setMedalItem({
            country: '',
            gold: 0,
            silver: 0,
            bronze: 0,
        });
    };

action을 클릭한 버튼의 name으로 지정해준 후

const handleSubmit = (e, value, action) => {
        e.preventDefault();
        if (action === 'add') {
            addMedal(value);
        } else if (action === 'update') {
            updateMedal(value);
        }
    };

이렇게 action에 따른 함수를 실행시켜주었습니다.

FrontEnd-Dev