[解決済み] Reactjsで入力にフォーカスが当たったとき、すべてのテキストを選択するには?
2022-05-16 09:31:58
質問
例えば コードペン
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
どのように解決するのですか?
Functional component
:
const handleFocus = (event) => event.target.select();
const Input = (props) => <input type="text" value="Some something" onFocus={handleFocus} />
ES6 class component
:
class Input extends React.Component {
handleFocus = (event) => event.target.select();
render() {
return (
<input type="text" value="Some something" onFocus={this.handleFocus} />
);
}
}
React.createClass
:
React.createClass({
handleFocus: function(event) {
event.target.select();
},
render: function() {
return (
<input type="text" value="Some something" onFocus={this.handleFocus} />
);
},
})
関連
-
[解決済み] SQL ServerでSELECTからUPDATEする方法とは?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] HTML5の数値入力のスピンボックスを非表示にすることはできますか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み] jQueryを使って、ターゲット要素のクリック座標を取得する方法
-
[解決済み] JavaScript 予期せぬ事態に対する可能な反復処理
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] event.targetを使用して、要素の親要素をターゲットにすることができますか?
-
[解決済み] javascriptからフィールドを無効とすることはできますか?
-
[解決済み] バックボーンビュー。親からイベントを継承・拡張する
-
[解決済み] async-await from functionを使用して非同期関数から値を返すには?重複
-
[解決済み] Facebook Reactでコードを再利用するためのミキシンとコンポーネントの使い分け
-
[解決済み] React Router v4 <NavLink>と<Link>の違いについて
-
[解決済み] Javascriptでメールを送信する
-
[解決済み] AngularJS - $http.postがJSONの代わりにリクエストパラメータを送信する方法はありますか?
-
[解決済み] Chrome、Javascript、window.open in new tabについて