Todolist(2) - 수정

이진아·2021년 7월 1일
0

toy Project

목록 보기
2/4

주제 : TodoList

기능 :
1. 원하는 item onClick하면 title, content 내용이 나옴
2. 수정 기능
3. 삭제 기능
4. 추가 기능

<2. 수정기능>

수정기능은 onChange를 통해서 title과 content를 변경할 수 있도록 만들었다.

const handleChange = (e, id) => {
        const { name, value } = e.target;
        todos[id-1][name] = value;
        setTodos([...todos]);
    };

여기에서 [id-1]를 한 이유는 배열은 0부터 시작이 되므로 id-1로 지정을 하였다.

그리고 이렇게 작성한 handleChange는

 <input style={{backgroundColor:'#0A0E1D',border:'none', color:'#F66B08', fontSize:'20px', width:'500px',textAlign:'center'}} 
            name="title" onChange={(e) => handleChange(e, id)} value={title}/>
          

내가 만들어 놓은 input 안에서 적용이 된다.

git : https://github.com/jinah26/bearTodolist

profile
새싹 개발자><

0개의 댓글