react 댓글 업데이트 기능, 댓글 삭제기능

댓글 업데이트 기능

commentList.jsx

handleClick = i  =>  e  => {

this.setState({

...this.state,

value:e.target.innerHTML,

update:i

})

}

updateChange = e  => {

const {value} = {...e.target}

  

this.setState({

...this.state,

value

})

}
<span  onClick={this.handleClick(k)}>  {v.content}  </span>

App.jsx

updateList = list  =>{

this.setState({

...this.state,

list

})

}

render(){

const {list} = this.state

return(

<>

{gogo()}

<Comment>

<CommentForm

addList={this.addList}

/>

<CommentList

list={list}

updateList={this.updateList}

/>

</Comment>

)

}

댓글 삭제 기능

commentList.jsx

deleteClick = k  => {

const { updateList,list } = this.props
  

const  newList = [...list].filter( (v,i) =>  i !== k )

console.log(newList)

// App 컴포넌트에있는 상태를 바꿔야함

  

updateList(newList)

}

App.jsx

updateList 함수랑 똑같기 때문에 재활용한다.

updateList = list  =>{

this.setState({

...this.state,

list

})

}

keyDown > 엔터를 눌러서 수정창의 값을 닫고,리스트를 수정하기 위한 값 전달

updateKeyDown = i  =>  e  => {

if(e.key !== 'Enter') return

  

const { updateList,list } = this.props

// list

const  newList = [...list]

newList[i].content = this.state.value


this.setState({

...this.state,

update:null,

})

updateList(newList)

}