Button 태그를 눌렀을때 해당 버튼의 id 값을 가져오고 싶었음.
const addRow = (e) => {
logger(e.target)
};
...
<ButtonCont>
<Button
id={`add_button_${tables.indexOf(table)}`}
bgColor="#fff"
width="100%"
_onClick={(e) => {
addRow(e);
}}
>
<Image
src={PlusButton}
width="30px"
height="30px"
margin="20px 0"
></Image>
</Button>
</ButtonCont>
빨간 네모, 검정 네모, 파란 네모를 눌렀을때 모두 다른 target이 나옴.
서칭을 조금 해보니... 이벤트 버블링의 가장 마지막에 위치한 최하위 요소를 반환하는 것이라고 한다.
내가 의도하고자 한것은 e.currentTarget 인데 e.currentTarget은 console.log(e.currentTarget) 에 담았을때, null이 나옴...
또 그 이유를 찾아보니... 이벤트가 동작하는 동안에만 그 값을 보여주는데 이벤트가 끝나면 null을 뱉는다고 한다.
const addRow = (e) => {
dispatch(exerciseCreator.addSetData());
const target = e.currentTarget;
};
...
<ButtonCont>
<Button
id={`add_button_${tables.indexOf(table)}`}
bgColor="#fff"
width="100%"
_onClick={(e) => {
addRow(e);
}}
>
<Image
src={PlusButton}
width="30px"
height="30px"
margin="20px 0"
></Image>
</Button>
</ButtonCont>
위와 같이 로컬 변수에 담아두면 해결!
백엔드 팀원들에게 제안한 나의 post api request
{
"myExercise": [
{
"exerciseName": "벤치 프레스",
"set": [
{
"type": "exercise",
"count": 2,
"weight": 20
},
{
"type": "break",
"time": 60
}
]
}
]
}
백엔드 팀원들이 제안한 post api request
{
"myExercise": [
{
"exerciseName": "벤치 프레스",
"set1": {
"count": 2,
"weight": 20
},
"set2": {
"count": 3,
"weight": 25
},
"set3": {
"count": 4,
"weight": 30
},
"break1": {
"time":
}
}
]
}