【html5】forプロパティについて

asaba 著者:asaba

【html5】forプロパティについて

今回は、html5でテキストとコンテンツを隣接して表示したい時に使われるfor(予約語のほうではないです)のお話になります。

例えば、selectタグで項目を選択している時は、アプリを使用しているユーザーに今何を選択しているか認知させている必要があります。

〇〇年と表示したい時ですが、中で文字列として埋め込んで表示させることができます。しかし、選択した情報を値としてデータベース

などに送りたい時は、この状態で送信すると例:’2019年’のように選択した西暦全体が文字列としてみなされてしまうので、

データベース側としては都合が悪いです。

この現象の解決策の中には、forタグを使ってセレクトボックス外で‘年’を表示させる方法があります。

forタグは、主に<label>タグの開始タグと終了タグに挟まれた文書を、隣接したコンテンツに関連付けさせるオブジェクトです。

通常ならば下の例のように書いていけば、セレクトボックスと文字列が紐付けられた状態で表示されます。

</pre>
<select value={this.state.year || 1970} onChange={ e => this.setState({year: e.target.value}) } >

{ this.yearData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}</select>

<label htmlFor="select-01">年</label>
<pre>

このように、forを使えば簡単にコンテンツと文字列を関連付けられるのですが、reactだとこのforがアンノウンになってしまい

認識されないというエラーが起きてしまいました。下記がそのエラーになります。

Unknown property ‘for’ found, use ‘htmlFor’ instead

通常のhtmlでは何の問題もなく使用することができるのですが、reactなどのフレームワークの中では効いてくれないので、

単にreactの仕様なのかな・・・?と感じています。と思ったのですが、javascriptでは予約語のforを使用するので

これでは混同してしまうのでhtmlForをつかってくださいとのことでした。→ htmlFor versus for?

書いているうちにちゃんとした理由が見つかりました。どおりでjavascriptを用いたreactでは使えない訳ですね!

てな訳で、reactでforを使いたいよという方は、代わりにhtmlForを使ってください。

その他参考にさせていただいたサイト→Using the for attribute in JSX – linter unknown property “for”

  • この記事いいね! (0)

著者について

asaba

asaba author

機種依存は悪い文明