11/17 フィードバック対応

派生プロジェクトの音楽ランキングメーカーを昨日リリースして、早速IKENでフィードバックをいただきました。

keydownイベントに対応

検索時にPCだとエンター押下で検索できると便利

reactにはinputタグにonKeyDownイベントがあるんですね。
知らなかった。
keyCode 13はENTERキーです。inputタグにフォーカスしているときにENTERキーを押すと検索処理をするようにします。

onKeyDown={(e)=>{
                        if(e.keyCode === 13){
                           //検索処理
                        }
                    }}

参考:ReactでEnterキーのpushイベントを取得する方法

改行のスタイルを修正

iPhoneだと、楽曲選択時に改行の位置に英文字が来ると数文字見切れてしまう

デバッグするとどうやらはみ出しているのは要素ではなく#text。
oh...怪奇現象!と思いつつググってみると。

参考:css – ブロックレベルから文字がはみ出してしまう

改行にも種類があるようで、何も指定していなかったのでword-wrap: break-wordを適用します。

CSS in JS

        wordWrap: 'break-word'