React 学習コース IV

1. お問い合わせフォームの確認

2. inputとtextarea

3. 送信完了メッセージの作成
import React from ‘react’;

class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
/* isSubmittedというstateを定義してください */
isSubmitted: false
};
}

render() {
/* 空の変数contactFormを定義してください */
let contactForm;

/* isSubmittedを条件式とするif文を作成してください */
if (this.state.isSubmitted) {
contactForm = (
<div className=’contact-submit-message’>
送信完了
</div>
);
} else {
contactForm = (
<form>
<p>メールアドレス（必須）</p>
<input />
<p>お問い合わせ内容（必須）</p>
<textarea />
<input
type=’submit’
value=’送信’
/>
</form>
);
}

return (
<div className=’contact-form’>
{/* 以下を削除して、変数contactFormを表示してください */}
{contactForm}
{/* 削除ここまで */}
</div>
);
}
}

export default ContactForm;

4. onSubmitとstateの更新
onSubmitイベント
フォームが送信されたときに処理を実行するには、formタグに対してonSubmitイベントを指定します。
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を追加してください */
<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;

5. 入力値のstate管理
stateとinputの準備
Reactでフォームを作る場合、stateと入力値を紐づける必要があります。
メールアドレスの入力値を管理するstateのemailを用意します。
また、inputタグのvalue属性にstateの値を指定しま

this.state = {
isSubmitted: false,
/* stateにemailを追加してください */
email: ”,
};

contactForm = (
<form onSubmit={() => {this.handleSubmit()}}>
<p>メールアドレス（必須）</p>
{/* inputにvalue属性を加えてください */}
<input value={this.state.email} />
<p>お問い合わせ内容（必須）</p>
<textarea />
<input
type=’submit’
value=’送信’
/>
</form>

6. onChangeと入力値の取得
onChangeイベント
フォームの入力や削除が行われたときに処理を実行するには、onChangeイベントを用います。
inputタグに対してonChangeイベントを指定しましょう。

contactForm = (
<form onSubmit={() => {this.handleSubmit()}}>
<p>メールアドレス（必須）</p>
{/* inputにonChangeイベントを追記してください */}
<input
value={this.state.email}
onChange={(event) => {console.log(event.target.value)}}
/>

7. stateの更新
/* handleEmailChangeという名前のメソッドを定義してください */
handleEmailChange(event) {
const inputValue = event.target.value;
this.setState({email: inputValue});
}

/* console.log(event.target.value) の部分を削除してください */
/* handleEmailChangeを実行するようにしてください */
onChange={(event) => {this.handleEmailChange(event)}}
/>

8. エラーメッセージの作成
stateと条件分岐
hasEmailErrorがtrueのとき、変数emailErrorTextにエラー部分のJSXを代入し表示するようにしましょう。

import React from ‘react’;

class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
isSubmitted: false,
email: ”,
/* hasEmailErrorを追加してください */
hasEmailError: false,
};
}

handleEmailChange(event) {
const inputValue = event.target.value;
this.setState({email: inputValue});
}

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

render() {
/* 変数emailErrorTextを定義してください */
let emailErrorText;

/* hasEmailErrorを条件にしたif文を作成してください */
if (this.state.hasEmailError) {
emailErrorText = (
<p className=’contact-message-error’>
メールアドレスを入力してください
</p>
);
}

<p>お問い合わせ内容（必須）</p>
<textarea />
<input
type=’submit’
value=’送信’
/>
</form>
);
}

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

export default ContactForm;

9. onChangeと入力チェック
handleEmailChange(event) {
const inputValue = event.target.value;
/* 定数isEmptyを定義し、入力チェックの結果を代入してください */
const isEmpty = inputValue === ”;

/* stateのemailとhasEmailErrorを更新してください */
this.setState({
email: inputValue,
hasEmailError: isEmpty,
});
}

10. お問い合わせ内容のstate管理
import React from ‘react’;

class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
isSubmitted: false,
email: ”,
hasEmailError: false,
/* contentとhasContentErrorというstateを追加してください */
content: ”,
hasContentError: false,
};
}

handleEmailChange(event) {
const inputValue = event.target.value;
const isEmpty = inputValue === ”;
this.setState({
email: inputValue,
hasEmailError: isEmpty,
});
}

/* handleContentChangeという名前のメソッドを定義してください */
handleContentChange(event) {
const inputValue = event.target.value;
const isEmpty = inputValue === ”;
this.setState({
content: inputValue,
hasContentError: isEmpty,
})
}

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

render() {
let emailErrorText;
if (this.state.hasEmailError) {
emailErrorText = (
<p className=’contact-message-error’>
メールアドレスを入力してください
</p>
);
}

/* 変数contentErrorTextを定義してください */
let contentErrorText;

/* hasContentErrorを条件にしたif文を作成してください */
if (this.state.hasContentError) {
contentErrorText = (
<p className=’contact-message-error’>
お問い合わせ内容を入力してください
</p>
)
}

let contactForm;
if (this.state.isSubmitted) {
contactForm = (
<div className=’contact-submit-message’>
送信完了
</div>
);
} else {
contactForm = (
<form onSubmit={() => {this.handleSubmit()}} >
<p>メールアドレス（必須）</p>
<input
value={this.state.email}
onChange={(event) => {this.handleEmailChange(event)}}
/>
{emailErrorText}
<p>お問い合わせ内容（必須）</p>
{/* stateのvalueの値と、onChangeイベントを追加してください */}
<textarea
value={this.state.content}
onChange={(event) => {this.handleContentChange(event)}}
/>
{/* contentErrorTextを表示してください */}
{contentErrorText}