<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리액트 시간</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<link rel="stylesheet" href="./example6.css">
</head>
<body>
<div id="root">
</div>
<script type="text/babel">
/*
JSX = javascript + xml
*/
class CommentForm extends React.Component{
state = {
content:'',
}
handleChange = (e) => {
this.setState({[e.target.name]:e.target.value})
}
handleSubmit = (e) => {
e.preventDefault()
this.props.onCreate(this.state.content)
this.setState({content:''})
}
render(){
return (
<li className="comment-form">
<form onSubmit={this.handleSubmit}>
<h4>댓글쓰기 <span>({this.props.count})</span></h4>
<span className="ps_box">
<input
type="text"
placeholder="댓글내용을 입력해주세요."
className="int"
name="content"
value={this.state.content}
onChange={this.handleChange}
/>
</span>
<input type="submit" value="등록" className="btn" />
</form>
</li>
);
}
}
class CommentList extends React.Component{
state = {
content:'',
key:Infinity,
}
handleClick = (key) => {
this.setState({key:key})
}
handleChange = (e) => {
this.setState({ [e.target.name]:e.target.value })
}
handleEnter = (e) => {
if(e.key === 'Enter'){
let {key,content} = {...this.state}
this.props.onUpdate(key,content)
this.setState({key:Infinity,content:''})
}
}
inputBox = (content) => {
return(
<input
type="text"
className="comment-update-input"
name="content"
defaultValue={content}
onChange={this.handleChange}
onKeyDown={this.handleEnter}
/>
)
}
renderList = () => {
return(
this.props.items.map((item,key)=>{
return(
<li key={key}>
<ul className="comment-row">
<li className="comment-id">{item.userid}</li>
<li className="comment-content">
<span onClick={()=>{ this.handleClick(key) }}>
{key === this.state.key ? this.inputBox(item.content) : item.content}
</span>
<span
className="comment-delete-btn"
onClick={ ()=>{this.props.onDelete(key)} }
>
X
</span>
</li>
<li className="comment-date">{item.date}</li>
</ul>
</li>
)
})
)
}
input = 0
render(){
return (
<>
{this.renderList()}
</>
);
}
}
class CommentLayout extends React.Component{
render(){
return(
<ul className="comment">
{this.props.children}
</ul>
)
}
}
class Comment extends React.Component{ // 모든 댓글기능이 다그려지는 역활
state = {
list:[]
}
onCreate = (data) => { // 일단 댓글쓸때 사용할 함수를 미리 선언
let item = {userid:'web7722',content:data,date:'2021-07-01'}
let {list} = {...this.state} // 내현재 state list를 복사해서 list라는 변수에 넣겠다.
let newList = [...list,{...item}] // 새로운변수를 선언해서 list라는 변수와, item이라는 변수를 넣어서 새로만들겠다.
this.setState({list:newList})
}
onUpdate = (index,content) => {
let {list} = {...this.state}
list[index].content = content
this.setState({list:list})
}
onDelete = (data) => {
//data 변수 1
let {list} = {...this.state}
let newList = list.filter((value,index)=>{
return data !== index
})
this.setState({list:newList})
}
componentDidMount(){ //생명주기
let list = [
{userid:'web7722',content:'안녕하세요 댓글이에요1',date:'2021-07-01'},
{userid:'web7722',content:'안녕하세요 댓글이에요2',date:'2021-07-01'},
{userid:'web7722',content:'안녕하세요 댓글이에요3',date:'2021-07-01'},
]
this.setState({list:list})
}
render(){
return(
<CommentLayout>
<CommentForm
onCreate={this.onCreate}
count={this.state.list.length}
/>
<CommentList
items={this.state.list}
onDelete={this.onDelete}
onUpdate={this.onUpdate}
/>
</CommentLayout>
)
}
}
class App extends React.Component{
render(){
return(
<Comment />
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
</html>
안녕하세요