Todo 수정

프론트엔드 개발의 마지막으로 Todo아이템 수정 부분을 만들어봅시다!

Todo아이템을 수정하는부분에서는 체크박스가 있구

그 title을 수정하고 ㅇ싶을때 입니다!

둘다해보겠습니다!

• TOdo컴포넌트에 readOnly 플래그가 있어 readOnly 가 true 인 경우 아이템 수정이 불가능 하고 , false인 경우 아이템을 수정할 수 있다.
• 사용자가 어떤 아이템의 title을 클릭하면 해당 input field는 수정할 수 있는 상태, 즉 readOnly가 false인 상태가 된다.
• 사용자가 Enter키 또는 Return키를 누르면 readOnly가 true인 상태로 전환된다.
• 체크박스 클릭 시 item.done 값을 전환한다. true -> false, false -> true

ReadOnly Mode

투두.js에

    constructor(props) {
        super(props);
        this.state = { item: props.item,readOnly : true};
        this.delete = props.delete;
      }
      dele

읽기전용이라는 불리언형태 변수를 넣어줍니다.

그리고 제목을 클릭했을때 일어나는 함수를 만들어줍시다!

      offReadOnlyMode = () => {
          console.log("Event! ", this.state.readOnly)
          this.setState({readOnly:false},()=>{
              console.log("ReadOnly ? " , this.state.readOnly)
          });
      }

그리고 렌더부분에

      render(){
        var item = this.state.item;
        return (
            <ListItem>
                <Checkbox checked={item.done}/>
                <ListItemText>
                <InputBase
                inputProps={{ "aria-label":"naked"
                ,readOnly: this.state.readOnly
                ,}}
                onClick={this.offReadOnlyMode}
                type="text"
                id={item.id}
                name={item.id}
                value={item.title}
                multiline={true}
                fullWidth={true}
                />
                </ListItemText>
                <ListItemSecondaryAction>
                    <IconButton aria-label="Delete Todo"
                    onClick = {this.deleteEventHandler}>
                            <DeleteOutline/>
                    </IconButton>
                </ListItemSecondaryAction>
            </ListItem>
        );
    }

<InputBase
                inputProps={{ "aria-label":"naked"
                ,readOnly: this.state.readOnly
                ,}}
                onClick={this.offReadOnlyMode}
                type="text"
                id={item.id}
                name={item.id}
                value={item.title}
                multiline={true}
                fullWidth={true}
                />

이렇게 추가해줍시다.

리드온리상태와 오프리드온리 모드를 연결해줍니다.

컴포넌트에는 이미 리드온리가는 props가 있습니다. 따라서 우리는 

우리가 관리하는 readOnly를 넘겨주기만 하면됩니다.

이후 오프리드온리모드가 실행되어 리드온리가 거짓으로 바뀌면서

컴포넌트가 해당 부분을 수정할 수 있는 상태로 변경해줍니다!!!

마우스커서가 깜빡이게되는것이죠!

그리고 콘솔창에서도 해당 기능이 계속 찍히는걸 알수가있답니다!!

ReadOnly True

이제 false를 반대로 true로 바꾸어 읽기전용모드가 되도록 바꾸겠습니다.

      enterKeyEventHandler = (e) => {
        if (e.key === "Enter") {
          this.setState({readOnly: true});
        }
      };

엔터키를 누르면 true가 되도록하는 함수를 생성해주고!

reder()의 리턴값중에

                onKeyPress={this.enterKeyEventHandler}

를 넣어주어 연결해줍니다!

Item 수정 함수

AddTodo 컴포넌트에서와 마찬가지로 사용자가 키보드의 키로 입력할 때마다 item을 새 값으로 변경해 주어야합니다!

      editEventHandler = (e) => {
          const thisItem = this.state.item;
          thisItem.title = e.target.value;
          this.setState({item:thisItem});
      }

이함수는 앞전에 입력을 추가할때 Addtodo의 InputField 를 저장하는 로직과 동일합니다

                onChange = {this.editEventHandler}

그리고 해당 함수도 onChage로 연결해줍니다!

해당 글들이~!

이렇게 수정되었습니다!

그런데 아직 체크박스가 작동을 안합니다... 이제 작동하게 해봅시다

CheckBox 업데이트

      checkBoxHandler = (e) => {
          const thisItem = this.setState.item;
          thisItem.done = !thisItem.done;
          this.setState({item:thisItem});
      }

해당 로직은 done은 무조건 ! 즉 참이면 거짓으로 바꿔주는 로직이다.

true면 false로, false면 true로 바꿔즈는 로직이다!

그리고 이것을

           <ListItem>
                <Checkbox checked = {item.done} onChange = {this.checkBoxHandler}/>
                <ListItemText>
                <InputBase
                inputProps={{ "aria-label":"naked"
                ,readOnly: this.state.readOnly
                ,}}
                onClick={this.offReadOnlyMode}
                onKeyPress={this.enterKeyEventHandler}
                onChange={this.editEventHandler}
                type="text"
                id={item.id}
                name={item.id}
                value={item.title}
                multiline={true}
                fullWidth={true}
                />
                </ListItemText>
                <ListItemSecondaryAction>
                    <IconButton aria-label="Delete Todo"
                    onClick = {this.deleteEventHandler}>
                            <DeleteOutline/>
                    </IconButton>
                </ListItemSecondaryAction>
            </ListItem>

이렇게 만든 함수를, 체크박스쪽에 onChange에 넣어 연결시켜줍니다!! 

웹단에서 수정하는 작업을 해보았다.

지금은 DB를 연결하지않고 어쩌면 휘발성이 짇은 단계이지만 그래도 목업화면으로는 괜찮게 만든것같다.

다음내용부터는 심도있게 써나갈 예정이다. 

프론트엔드와 백엔드 서비스를 통합하는 내용이다.