3주차 : 리액트-입문-todo 만들기(클래스형)
app.js
import React, { Component } from 'react';
import Todolist from './Todolist';
class App extends Component {
constructor(props) {
super(props);
this.state={
contents:[ ], todo:''
}
this.handleChange = this.handleChange.bind(this);
this.handleClickDelete = this.handleClickDelete.bind(this);
this.handleClickRed = this.handleClickRed.bind(this);
}
handleChange(e){
this.setState({
todo:e.target.value
})
}
handleClickDelete(id){
this.setState({
contents: this.state.contents.filter(
content => content.id !== id
)
})
}
handleClickRed(id){
this.setState({
contents: this.state.contents.map(
content => {if(content.id === id){
return {...content, heart: !content.heart}
}
return content;
} )
})
}
render() {
return (
<div>
<h1>todo</h1>
<Todolist contents={this.state.contents}
onClickDelete={this.handleClickDelete}
onClickRed={this.handleClickRed}
/>
<form
onSubmit={(e)=>{
e.preventDefault()
const newTodo = {
id:Date.now(),
text:this.state.todo,
heart:false
}
this.setState({
...this.state,
contents:[...this.state.contents,newTodo],
todo:''
})
}}>
<input
value={this.state.todo}
onChange={this.handleChange} />
<button>추가하기</button>
</form>
</div>
);
}
}
export default App;
Todolist.js
import React, { Component } from 'react';
class Todolist extends Component {
render() {
return (
<div>
<ul>
{this.props.contents.map((content) => {
const { id, text, heart} =content
return (
<li key={content.id}>
{content.text}
<button
type="button"
style={{background:content.heart?'red':'pink'}}
onClick={() => this.props.onClickRed(content.id)}
>0</button>
<button
type='button'
onClick={()=>this.props.onClickDelete(content.id)}
>
삭제
</button>
</li>
)}
)}
</ul>
</div>
);
}
}
export default Todolist;
//콘솔로그(0)
//함수분리(0)
//스프레드문법(0)
//todolist(0)
// 키값-삭제- 필터
Author And Source
이 문제에 관하여(3주차 : 리액트-입문-todo 만들기(클래스형)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hook/3주차-리액트-입문-todo-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)