[解決済み] 入力が空のとき、ボタンを無効にするには?
2022-04-20 08:58:49
質問
Reactの初心者です。入力フィールドが空のとき、ボタンを無効にしようとしています。このためのReactの最良のアプローチは何ですか?
私は以下のようなことをしています。
<input ref="email"/>
<button disabled={!this.refs.email}>Let me in</button>
これでよいのでしょうか?
動的属性の重複だけでなく、ある要素から別の要素へのデータの転送/チェックも気になるので。
どのように解決するのですか?
入力の現在の値をステートで保持する(またはその値の変化を渡す)必要があります。 をコールバック関数で親に送る。 または 横向き または <あなたのアプリの状態管理ソリューションはこちら> のように、最終的にプロップとしてコンポーネントに戻されます)、ボタンの disabled プロップを導出することができます。
ステートを使用した例です。
<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";
var App = React.createClass({
getInitialState() {
return {email: ''}
},
handleChange(e) {
this.setState({email: e.target.value})
},
render() {
return <div>
<input name="email" value={this.state.email} onChange={this.handleChange}/>
<button type="button" disabled={!this.state.email}>Button</button>
</div>
}
})
React.render(<App/>, document.getElementById('app'))
}()</script>
関連
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] カスタマイズ素材UI チェックした場合としない場合の切り替え
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法
-
[解決済み] レンダリング後に入力フィールドにフォーカスを設定するには?
-
[解決済み】 {this.props.children} に props を渡すには?}
-
[解決済み】フォーム要素の状態を兄弟/親要素に渡す正しい方法とは?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み] configuration.module に未知のプロパティ 'loaders' があります。
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。
-
[解決済み] 矢印本体を囲む予期せぬブロックステートメント
-
[解決済み] アクシオスは定義されていません