問題タブ [material-ui]

「material-ui」パッケージをダウンロードし、NPM を介して package.json ファイルに追加しました。私のpackage.jsonファイルに表示されています。ただし、AppBarブラウザが定義されていないと言っているように、コンポーネントにアクセスできません。application.js ファイルにグローバル変数を追加しようとしましたが、実際にはアプリがクラッシュしています。

var MaterialUI = require('material-ui');

Rails 4 と Ruby 2.1 を Browserify で使用しています。確かにイライラします、私は自分が間違っていることを理解できません。あなたが私に与えることができる正しい方向への助け/指針をありがとう!

クリック時に material-ui を使用してテキスト フィールドの値を取得して、状態を更新しようとしています。ただ、ここのtodo状態の更新はsetStateが常に一歩遅れているようです。たとえば、最初に「asdf」と入力すると、this.state.todo空になります (これが初期化されたものです)。次に「1234」と入力します。クリックすると、それthis.state.todoが「asdf」であることがわかりました!

質問 1:これは setState の「保留中の状態遷移」と関係があると思いますが、これを解決する方法がわかりません。

バニラ (非マテリアル UI) 入力フィールドで onChange と value を使用すると、すべてうまく機能しました。

質問 2: setState が material-ui getValue() の場合にプロセスをバッチ処理した理由についても興味がありますが、入力で onChange/Value を使用した場合はそうではありません。

以下は両方の品種のコードです。

Material-UI TextField:

バニラインプット

material-ui TextField のコンソール出力

React と Redux および Material UI を使用して webapp を構築しています。Web アプリケーションは、いくつかのページとコンポーネントで構成されています。スナックバーまたはダイアログは、ユーザーが行っていることに直接接続する必要があることを知っています。ただし、ページとコンポーネントでスナックバーとダイアログを独立させたいと考えています。したがって、ユースケースは、のようなメッセージbackground synchronization of your data failedとアクションを表示していますretry now。私のアイデアは、スナックバーを というページにレンダリングすることでしたRootFrame。これは、他のすべてのページをラップし、アクションのペイロードとしてスナックバーのテキストをディスパッチするために使用されます。

スナックバーを表示する私の Redux アクション:

もちろん、メッセージを引数として受け取る代わりに、アクションでメッセージを指定することも良いかもしれませんが、それは今のところ私の問題ではありません。問題は、このシステムを使用してアクション付きのスナックバーを表示するにはどうすればよいかということです。自分の行動を次のように変更できますか

RootFrame私のスナックバーを同様にレンダリングします

スナックバーが閉じられると、アクションによって state: の変数が変更されますsnackbar.visible = false。これは、スナックバーを有効にするために使用されます ( の場合にレンダリングされますsnackbar.visible === true)。ユーザーが をクリックするとretry now、同期を開始するアクション (props としてコンポーネントに渡される) がディスパッチされる必要があります。ダイアログを使用する場合、問題は非常に似ています。したがって、表示するテキストだけでなく、次の可能なアクションもコンポーネントに渡す必要があります。

このように Redux を使用しても問題ないと思いますか、それともより良い解決策はありますか?

UI フレームワークとして material-ui を使用しており、異なる値を持つ 2 つのボタンを持つビューを作成しようとしています。

私は反応するのが初めてなので、基本的なものが欠けていると思います。FlatButton に値を渡すにはどうすればよいですか?「ref」属性を使用できますか? 私の主な問題は、フレームワークを使用していることです。これらのコンポーネントを作成した場合は、「ラベル」などの小道具を使用して、コンポーネント自体からクリック イベントを処理します。

更新：解決策を見つけましたが、それでもアンチパターンのように感じます...

助けてくれてありがとう...

マテリアル UI を使用してシンプルなアイコン ドロップダウン メニューを作成しています。しかし、レンダリング後にグリフが表示MenuItemsされ、クリックしても表示されません。ここにコードがあります -

これは初心者の React.js / ES2015 の質問です。

本の名前のリストを表示する HTML があります。

ユーザーが名前を編集して Enter キーを押すと、クラスのメソッドを呼び出して、本が存在するかどうかを確認し、ストアを更新します。

問題は次のとおりです。このメソッドで、クラス( this.doesBookExistElseShowMessage ) と呼び出し元オブジェクト( this.defaultValue ) の両方にアクセスするにはどうすればよいですか?

これは呼び出しオブジェクト (現在の TextField) であるか、クラス コンストラクターでこれをクラスにバインドできます。

しかし、その後 TextField へのアクセスを失います。メソッドで両方のオブジェクトへの参照を取得する方法がわかりません。