프로그래밍 공부 일기

2020년 6월 23일 Progate Lv.146
React Ⅳ

문의 양식 작성

이번에는 ContactForm이라는 컴퍼넌트를 작성해 만든다.



폼의 JSX는 HTML과는 다른 쓰는 방법을 하기 때문에 조심한다. 전체 양식은 <form> 태그로 묶습니다. input 태그는 <input /> , textarea 태그는 <textarea /> 라고 쓴다. 송신 버튼 HTML과 같이 input 태그를 사용해 type='subimit' 를 지정한다. 표시명을 바꾸고 싶은 경우에는 value='表示名' 로 한다.

예

<form>
  <textarea />
  <input type='submit' />
</form>

송신 완료 메시지 작성

폼이 제출되었는지 여부는 state로 관리한다. 이를 위해 isSubmitted라는 진위치 형의 state를 준비한다. false일 때는 양식을 true일 때는 송신 완료 메시지를 표시한다. 따라서 초기 값은 false입니다.

ContactForm.js

constructor(props){
  super(props);
  this.state={isSubmitted:false};
}
...

render(){
  let contactForm;
  if(this.state.isSubmitted){
    contactForm= //送信完了メッセージのJSX（※()で囲む）
  }else{
    contactForm= //フォームのJSX
  }
  ...
  return(
    <div>{contactForm}</div>
  );
  ...

onSubmit 이벤트

폼이 전송되었을 때 처리를 실행하려면 form 태그에 onSubmit 이벤트를 지정한다.

<form onSubmit = [()=>{処理}}> ... </form>

state의 값을 갱신하는 메소드를 작성해, 폼의 송신시에 호출한다.

ContactForm.js

//1.stateの値を更新するメソッドの定義
handleSubmit(){
  this.setState({isSubmitted:true});
}
...
render(){
  //2.フォーム送信時にメソッドを呼び出す
  <form onSubmit={()=>{this.handleSubmit()}}>
  ...

문의 양식 작성

ContactForm.js

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
    };
  }

  handleSubmit(){
    this.setState({isSubmitted:true})
  }

  render() {
    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          送信完了
        </div>
      );
    } else {
      contactForm = (
        <form  onSubmit={()=>{this.handleSubmit()}} >
          <p>メールアドレス（必須）</p>
          <input />
          <p>お問い合わせ内容（必須）</p>
          <textarea />
          <input
            type='submit'
            value='送信'
          />
        </form>
      );
    }

    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;