【React.createRef】<Form>から受け取った値をオブジェクトに格納する

#はじめに

プログラミング歴2ヶ月の素人が書いています。（間違っていたらご指摘ください）

WesBos.com のオンラインビデオコースでReactを学習しています。
動画は以下から。
https://reactforbeginners.com/

「React.createRef」についての学習メモです。

#そもそもReact.createRefとは

以下がわかりやすい。（英語です）
https://blog.logrocket.com/how-to-use-react-createref-ea014ad09dba/

ざっくり説明すると...
ref属性を要素に付与することで、直接DOMにアクセスすることができる。

通常DOMに介入するためには、stateやpropsを通じて行うことが原則であるが、refを使用することでより直接的にDOM情報のやりとりをすることが可能。

ただし、原則を崩してしまうと全体として訳が分からないプログラムになってしまうので、使用は推奨されていないみたいです。

#<Form>で受け取った値をrefで扱ってみる

const Form = () => {

    return (
        <form onSubmit={createItem}>
            <input name="name"  type="text" />
            <input name="price" type="text" />
            <button type="submit"> + Add! </button>
        </form>
    );
};

ここにFormのコンポーネントがあります。

やりたいことは、以下です。

• フォーム内のinputに入力された値（value）を受け取って使いたい。

要は、

document.querySelector(<input>).value

をReactでやりたい、ということです。

これを実現するために、ref属性を<input>に付与します。

const Form = () => {

    const nameRef  = React.createRef(); //refの作成
    const priceRef = React.createRef(); //refの作成

    return (
        <form onSubmit={createItem}>
            <input name="name"  ref={nameRef}  type="text" /> {/*refの付与*/}
            <input name="price" ref={priceRef} type="text" /> {/*refの付与*/}
            <button type="submit"> + Add! </button>
        </form>
    );
};

React.createRef()で作成したrefを<input>タグに付与します。

その名のとおり、refは付与された要素への参照になります。
例えば、<input　name="name"/>に入力された値に、以下のようにアクセスできるようになります。

nameRef['current'].value

参照したrefの['current']プロパティ内から、必要な要素の情報にアクセスすることができます。

#完成品

<buttom>を押すと、createItem()が動いて、入力された値を保存します。

const Form = () => {

    const nameRef  = React.createRef(); //refの作成
    const priceRef = React.createRef(); //refの作成

    const createItem = () => {
        const item = {
            name   : nameRef['current'].value,  //オブジェクトに格納
            price  : priceRef['current'].value, //オブジェクトに格納
        };
    };

    return (
        <form onSubmit={createItem}>
            <input name="name"  ref={nameRef}  type="text" /> {/*refの付与*/}
            <input name="price" ref={priceRef} type="text" /> {/*refの付与*/}
            <button type="submit"> + Add! </button>
        </form>
    );
};

#まとめ

ref属性を要素に付与することで、直接DOMにアクセスできる。