댓글3. 기능 구현(C) -수정중

 

 

상위가 아닌 현재 컴포넌트(CommentForm) 컴포넌트에 state 선언해서

인풋에 넣은 내용만 최신화 및 submit 눌렀을 때 인풋에 어떤 내용 있는 지 정확하게 확인 가능

 

1. 인풋박스 상태 최신화

class CommentForm extends React.Component {
    state = {
        value: ''
    }
    render() {
        return(
        <li className ="comment-form">
            <form>
                <span className="ps_box">
                    <input
                        type="text"
                        className="int"
                        placeholder="댓글을 입력해주세요"
                        value={this.state.value}
                    />
                </span>
                <input 
                    type ="submit"
                    className="btn"
                    value="등록"
                />
            </form>
        </li>
        )
    }
}

 

함수를 만들어서 밸류 값을 반영해보자

 

handleChange = e => {
    const {value} = {...e.target}
    this.setState({
        value
    })
}

 

폼 컴포넌트의 인풋에 이벤트 작성

onChange={this.handleChange}

 

 

 

 

 

 

2. 폼을 제출할 때 이벤트를 발생시키기 위해 함수 선언 후 이벤트 작성

 

handleSubmit = e => {
    e.preventDefault()
}

<form onSubmit = {this.handleSubmit}>

 

 

3. submit value가 리스트에서 렌더되게 하기

1. 써브밋했을 때 인풋의 밸류 값이, 앱 컴포넌트에 있는 리스트 배열에 push 될 수 있도록 해야 함
2. 이를 위해 앱 컴포넌트에서 상태를 바꿀 수 있는 함수 선언해서 폼 컴포넌트에 props로 함수 전달할 예정
3. 또한 폼 컴포넌트에서는 handleSubmit 함수 호출 시, props로 전달받은 함수를 실행시킬 코드 작성

 

 

3-1. 앱 컴포넌트에 addList 함수 선언 및 props로 전달

 

 

임의의 데이터인 객체 추가

addList = (content) => {
    this.setState({
        list: [...this.state.list,
        { userid: 'web7722', content: content, date: "2022-04-26" }]
    })
}

폼 컴포넌트에 addList 함수 전달

render() {
    return(
        <Comment>
            <CommentForm addList = {this.addList}/>
            <CommentList list = {this.state.list}/>
        </Comment>
    )
}

 

 

3-2. 폼 컴포넌트에서 프롭스로 받은 함수에 상태의 밸류 값을 넣어서 호출하자

handleSubmit = e =>{
    e.preventDefault()
    this.props.addList(this.state.value)
}

 

 

 

 

작성한 이후에는 밸류를 지우는 코드를 작성해보자

handleSubmit 안에 아래와 같은 코드를 작성해서 상태를 빈 문자열로 만들어주자

this.setState({
    value:''
})

 

 

 

 

 

누적 작성 코드 (CR)

<script type="text/babel">
class CommentList extends React.Component {
    items = ()=> this.props.list.map((v,k)=>{
        return(
            <ul className ="comment-row">
                <li className="comment-id">{v.userid}</li>
                <li className="comment-content">{v.content}</li>
                <li className="comment-date">{v.date}</li>
            </ul>
        )
    })
    render() {
        return(
        <li>
            {this.items()}
        </li>
        )
    }
}
class CommentForm extends React.Component {
    state = {
        value: ''
    }

    handleChange = e => {
        const {value} = {...e.target}
        this.setState({
            value
        })
    }

    handleSubmit = e =>{
        e.preventDefault()
        this.props.addList(this.state.value)
        this.setState({
            value:''
        })
    }

    render() {
        return(
        <li className ="comment-form">
            <form onSubmit = {this.handleSubmit}>
                <span className="ps_box">
                    <input
                        type="text"
                        className="int"
                        placeholder="댓글을 입력해주세요"
                        value={this.state.value}
                        onChange={this.handleChange}
                    />
                </span>
                <input 
                    type ="submit"
                    className="btn"
                    value="등록"
                />
            </form>
        </li>
        )
    }
}
class Comment extends React.Component {
    render() {
        return(
            <ul className="comment">
                {this.props.children}
            </ul>
        )
    }
}

class App extends React.Component {
    state = {
        value: 'hello',
        list: []
    }

    componentDidMount(){
        this.setState({
            ...this.state,
            list:[
            {userid:'web7722',content:'안녕하세요2',date:"2022-04-21" },
            ]
        })
    }


    addList = (content) => {
        this.setState({
            list: [...this.state.list,
            { userid: 'web7722', content: content, date: "2022-04-26" }]
        })
    }

    render() {
        return(
            <Comment>
                <CommentForm addList = {this.addList}/>
                <CommentList list = {this.state.list}/>
            </Comment>
        )
    }
}
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root)
</script>