問題タブ [material-ui]

私は最近、react.js の学習を開始し (大好きです!)、入力値の処理に関する興味深いシナリオに出くわしました。

Egghead チュートリアルでは、次のrefようなものを使用して入力を更新しました。

後で、マテリアル uiライブラリ (これも素晴らしい) をいじっていたところref、 .. Google でしばらくした後、 the を使用して、次のように関数stateを使用して更新できることがわかりました。onChange

を使用するref方が簡単なように思えますが、最近反応ネイティブを学んでいると、onChange関数とstate変数を使用して行うすべてのことが2番目の方法のようです。

だから私の質問は、先に進むために、どちらかを使用する方が良いでしょうか? たぶんstate、ネイティブでの使用をより良くする制限がありますか?

現在、React + MaterialUi アプリケーションの単体テストを作成しています。

私のアプリケーションにはダイアログがあります。ダイアログでどのボタンが押されたかに応じて確認したい：

それに応じて内部状態が変化すること。

TestUtils.scryRenderedComponentsWithType(FlatButton)
残念ながら、またはなどを使用してダイアログの内容を把握できません
scryRenderedComponentsWithTag("button")
。

そのフローをテストする方法についてのアイデアはありますか?

更新 1

したがって、TestUtils.scryRenderedComponentsWithType(Dialog) を呼び出して、Dialog インスタンスを取得できます。しかし、ダイアログの内容を取得できません。DOM に関しては、コンテンツはビュー自体の内部ではレンダリングされません。ドキュメント レベル (div) で新しく作成されたノードにレンダリングされます。だから私はこれを試しました：

上記の場合の cancelButton は正しい DOM 要素です。ただし、Simulate.click はコンポーネントのクリック機能をトリガーしません。

よろしくジョナス

アプリでmaterial-ui React コンポーネントを使用しようとしています。私は webpack を使用しており、npm で material-ui をインストールしています。フォームのテキスト入力をすでに material-ui text-field に置き換えており、うまく機能しています。

しかし。

次に、ボタンを追加してみました。シンプルですよね？突然、次のエラーが表示されます。

テストしましたが、空の Javascript ファイルを次の行でロードしただけでも、このエラーがスローされます。

その行を削除すると、すべて正常に動作します。テキストフィールドが機能するのは奇妙なので、セットアップが正しいことはわかっています。ボタンコード内でMixinが使用されていると思いますか?

誰もこれを経験しましたか？これに関する情報はまばらです。どんな助けでも大歓迎です。

テーマを完全にカスタマイズする方法を理解しようとしています。 material-ui のガイドライン/ドキュメントでは、このファイルを確認するように指示されています: https://github.com/calleall/material-ui/blob/master/src/styles/theme-manager.js

カスタムテーマに次のようなブロックを追加してみました：

しかし、それはアプリバーには影響しません。残りのテーマ変数は機能します。

このファイルの他の変数をカスタマイズするにはどうすればよいですか?

以下を使用するAutocompleteフィールドがあります。

このような;

しかし、更新するthis.setState({searchText: null }) と、autoComplete は 1 回クリアされますが、2 回目はクリアされません。

これがバグなのか、フィールドをリセットする別の方法があるのか​​ はわかりません。

また、フィールドを探して a を追加しようとしましたrefが、うまくいきませんでした。

バグの場合はここに提出 https://github.com/calleall/material-ui/issues/2615

React コンポーネントが内部で定義するメソッドを呼び出す方法はありますか?

一般的に、props/data などを使用して宣言的に値を渡したいことは理解していますが、内部の便利なメソッドを持ついくつかのコンポーネント ライブラリを使用しています。

例えば

たとえば、このメソッド https://github.com/calleall/material-ui/blob/master/src/auto-complete.jsx#L244-L248

material-ui AutoCompleteコンポーネントで。

を使用して、material-uiを使用してナビゲーション バーを作成していTabます。私のタブ ナビゲーション バーは、 Master.jsxとほぼ同じです。

基本的に、、、およびを削除AppBarしAppLeftNavましFullWidthSectionた。

唯一の問題は、下のTabsいくつかの要素が隠れていることです。下の図を参照してください。

私は何か間違ったことをしたに違いない、何かアイデアはありますか？ありがとう！