Zenn
🦁

[React]お問い合せフォーム

2024/09/08に公開
JavaScript
React
初心者
tech

お問い合せフォーム作成

フォームのJSXは、HTMLと違った書き方をする😯🩵

⭐️またフォーム全体は<form></form>で囲むこと🪼

コード
js
import React from 'react';

class ContactForm extends React.Component {
  render() {
    return (
      <div className='contact-form'>
        <form>
          <p>メールアドレス（必須）</p>
          <input />
          
          <p>お問い合わせ内容（必須）</p>
          <textarea />

          <input
           type='submit'
           value='送信'
           />
          
        </form>
      </div>
    );
  }
}
export default ContactForm;

送信完了ページとの切り替え

  1. stateの定義
    ContactFormクラスの中でisSubmittedというstateを定義(初期falseに設定)
this.state = {
  isSubmitted: false,
};
  1. handleSubmitメソッドの定義
    フォームが送信された際に、isSubmittedの値をtrueに変更するhandleSubmitメソッドを定義します。このメソッドが呼ばれると、this.setState({isSubmitted: true})によってfalseからtrueに変わります。
 handleSubmit() {
    this.setState({isSubmitted: true});
  }
  1. renderメソッド内でcontactFormの状態を切り替え
    renderメソッド内で、isSubmittedの値に基づいて表示を切り替えます。
    isSubmittedがfalseの場合はフォームを表示し、trueの場合は「送信完了」というメッセージを表示します。
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>
  );
}

  1. onSubmitイベントの設定
    <form>要素にonSubmitイベントを追加し、送信ボタンが押されたときにhandleSubmitメソッドが呼ばれるようにします。これにより、送信ボタンを押すとフォームが非表示になり、「送信完了」のメッセージが表示されるようになります。

  2. returnで{contactForm}を出力
    <form>に送信ボタンを押したら表示が切り替わるようにonSubmitイベントを定義。
    handleSubmitを書いて送信ボタン押したらfalseがtrueになるようにする。（表示変わるように）

return (
  <div className='contact-form'>
    {contactForm}
  </div>
);
完成コード

import React from 'react';

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

/* handleSubmitメソッドを定義 */
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;

Discussion