【初心者向け】Reactで各種フォームの値を取得をする

はじめに

Javascriptでのフォームの取得に関していくつか方法がありますが、Reactで定石の値の取得方法があります。

今回はReactによるフォームの取得方法についてまとめていきます。

Textのvalueを取得

まずは基本的なテキストの値を取得してみましょう。

今回はニックネーム、メールアドレス、パスワードの値を取得しみます

this.stateにconstructorで初期値を設定しましょう。

あらかじめフォームで送信することを想定して送信ボタンも作っておきます。

送信ボタンを押すとstateに入っている値をコンソールに出力するように作成していきましょう。

以下の様になります。

export default class Index extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = { 
            name: '', 
            email: '', 
            password: '' 
        }; 
 
        this.handleChangeText = this.handleChangeText.bind(this); 
        this.onSubmit = this.onSubmit.bind(this); 
    } 
 
    handleChangeText(event) { 
        this.setState({ [event.target.name]: event.target.value }); 
    } 
 
    onSubmit(){ 
        console.log(this.state); 
    } 
 
    render() { 
        return ( 
            <form> 
                <label>ニックネーム 
                    <input type="text" name="name" onChange={this.handleChangeText} value={this.state.name} /> 
                </label> 
 
                <label>メールアドレス 
                    <input type="email" name="email" onChange={this.handleChangeText} value={this.state.email} /> 
                </label> 
 
                <label>パスワード 
                    <input type="password" name="password" onChange={this.handleChangeText} value={this.state.password} /> 
                </label> 
 
                <button type="button" name="submit" onClick={this.onSubmit}>送信</button> 
 
            </form> 
        ) 
    } 
}

これで送信ボタンを押すとstateの中身を見れるようになりました。

inputタグにはonChangeかreadOnlyをつけなければエラーが出るようになっています。

reactにおいては基本的にonChangeを使ってinputの値が変更されるたびにstateの値を更新していきます。

また、reactを勉強する際には常にthisが何を表すのか意識していきましょう。

以下のコードを見てください。

ここのthisは全てIndexクラスを指します。これはオブジェクト指向で書かれているのでIndexというオブジェクトを指すことになりますね。

ここではthisをバインドしてhandleChangeTextというメソッドに代入しています。

これでhandleChangeTextメソッドでthisを使う場合、そのthisは全てIndexオブジェクトを指すことになります。

this.handleChangeText = this.handleChangeText.bind(this);

次に以下のコードを見てください。

event.targetで指定したinputタグのdom要素を指定することはできます。

今回はjsonのキーを変数にしたいので[]でくくりましょう。event.target.valueにはnameに相当するinputタグのvalue値が格納されています。

handleChangeText(event) { 
    this.setState({ [event.target.name]: event.target.value }); 
}

これで実際に動かすとフォームで値を取得して自由に整形するなりAPIにリクエストを送るなりできるようになりました。

Textareaの内容を取得

Textareaは通常のHTMLと少々書き方が違います。

Reactにおいては

<textarea></textarea>

のような書き方ではないので注意してください

export default class Index extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = { 
            comment: ''; 
        }; 
 
        this.handleChangeTextarea = this.handleChangeTextarea.bind(this); 
        this.onSubmit = this.onSubmit.bind(this); 
    } 
 
    handleChangeTextarea(event) { 
        this.setState({ comment: event.target.value }); 
    } 
 
    onSubmit(){ 
        console.log(this.state); 
    } 
 
    render() { 
        return ( 
            <form> 
                <label>コメント 
                    <textarea name="comment"  onChange={this.handleChangeTextarea} value={this.state.textarea} /> 
                </label> 
 
                <button type="button" name="submit" onClick={this.onSubmit}>送信</button> 
 
            </form> 
        ) 
    } 
}

あとは通常のinputタグ、テキストボックスの値の取得方法と変わらないです。

プルダウンの内容を取得

プルダウンも基本は同じです。

selectタグにnameとvalueを設定します。

そしてセレクトの変化があった場合にstateの値を書き換えられるようにしています。

export default class Index extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = { 
            grade: '3' 
        }; 
 
        this.handleChangeOption = this.handleChangeOption.bind(this); 
        this.onSubmit = this.onSubmit.bind(this); 
    } 
 
    handleChangeOption(event) { 
        this.setState({ grade: event.target.value }); 
    } 
 
    onSubmit(){ 
        console.log(this.state); 
    } 
 
    render() { 
        return ( 
            <form> 
                <label>学年 
                    <select name="grade" value={this.state.grade} onChange={this.handleChangeOption}> 
                        <option value="1">1年</option> 
                        <option value="2">2年</option> 
                        <option value="3">3年</option> 
                        <option value="4">4年</option> 
                    </select> 
                </label> 
 
                <button type="button" name="submit" onClick={this.onSubmit}>送信</button> 
 
            </form> 
        ) 
    } 
}

一点ポイントで今回はstateの初期設定でgradeに3を入れました。これでプルダウンの初期値を設定ができるようになります。

今回は3年がデフォルトで選択されていますね。

私は通常のhtmlでselectedを指定するよりシンプルに設定できるなあと感じました。

チェックボックスの値を取得する

チェックボックスは少々複雑になりますが、最初のconstructorでstateに4つの要素を持っており、全てnullで埋めた値を割り当てています。

handleChangecheckboxメソッドではチェックボックスに値が入っていなかった場合には新しく要素として追加し、入っていた場合にはその要素を削除を削除するようにしてチェックボックスに何が入っているのかを判断しているようにしています。

export default class Index extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = { 
            fruit: new Array(4).fill(null) 
        }; 
 
        this.handleChangecheckbox = this.handleChangecheckbox.bind(this); 
        this.onSubmit = this.onSubmit.bind(this); 
    } 
 
    handleChangecheckbox(event) { 
        const dataId = event.currentTarget.getAttribute('data-id'); 
        let fruits = this.state.fruit; 
        if (fruits[dataId] === null) { 
            fruits[dataId] = event.target.value; 
        } else { 
            fruits[dataId] = null; 
        } 
        this.setState({ fruit: fruits }); 
    } 
 
    onSubmit(){ 
        console.log(this.state); 
    } 
 
    render() { 
        return ( 
            <form> 
                <label>好きな果物 
                    <input type="checkbox" name="fruit" onChange={this.handleChangecheckbox} data-id="0" value="りんご" />りんご 
                    <input type="checkbox" name="fruit" onChange={this.handleChangecheckbox} data-id="1" value="みかん" />みかん 
                    <input type="checkbox" name="fruit" onChange={this.handleChangecheckbox} data-id="2" value="ばなな" />ばなな 
                    <input type="checkbox" name="fruit" onChange={this.handleChangecheckbox} data-id="3" value="もも" />もも 
                </label> 
 
                <button type="button" name="submit" onClick={this.onSubmit}>送信</button> 
 
            </form> 
        ) 
    } 
}

ラジオボタンの値を取得する

最後にラジオボタンの取得方法を見ていきましょう

ラジオボタンは同じnameの場合選択肢は必ず一つなのでチェックボックスよりも簡単です。

export default class Index extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = { 
            animal: '' 
        }; 
 
        this.handleChangeRadio = this.handleChangeRadio.bind(this); 
        this.onSubmit = this.onSubmit.bind(this); 
    } 
 
    handleChangeRadio(event) { 
        this.setState({ [event.target.name]: event.target.value }); 
    } 
 
    onSubmit(){ 
        console.log(this.state); 
    } 
 
    render() { 
        return ( 
            <form> 
                <label>いぬ派？ねこ派？ 
                    <input type="radio" name="animal" onChange={this.handleChangeRadio} value="いぬ" />いぬ 
                    <input type="radio" name="animal" onChange={this.handleChangeRadio} value="ねこ" />ねこ 
                </label> 
 
                <button type="button" name="submit" onClick={this.onSubmit}>送信</button> 
 
            </form> 
        ) 
    } 
}

テキスト等と同じような形で取得できます

まとめ

いかがでしたでしょうか？Reactでも簡単にフォームの値を取得することができることができたかと思います。

これで取得した値を整形したり、APIに値を投げることができますね。

これからもReactを使って快適にコーディングを行っていきましょう。

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫