問題タブ [react-bootstrap]

Javascript クラスからコンポーネントをインスタンス化することにより、実行時に React-Bootstrap でアラート コンポーネントを動的に生成しようとしています。私がこれを行っているのは、表示するアラートがたくさんあり、Javascript クラスの作成がより簡潔であるためです。

これを行う私の試みはうまくいきません。問題が一般的に React に当てはまるのか、それとも単に React-Bootstrap に当てはまるのかはわかりません。ただし、react.js でエラーが発生し、以下がスローされます。

スローはalert.getComponent()、次の JSX ファイルの呼び出しで発生します。

Alertコンポーネントは React-Bootstrap ライブラリから取得されます。コンポーネントは無関係に見えますdivが、react フレームワークを満たすために必要であることがわかりました。実際には、AlertNoticeインスタンスを反応状態で保存し、それらから反応ノードを生成します。

これについての適切な方法は何ですか？

ここにヒントがあります。次のハードコーディングされたアラートに置き換えるreturn alert.getComponent();と、AlertDismissible コンポーネントはエラーなしで (重複して) レンダリングされますが、警告が表示されます。

以下は、上記の置き換えで表示される警告メッセージで、key=アラートごとに一意に設定する必要があることを説明するリンクが含まれています。

AlertNotice.prototype.getComponentただし、内部のコードを上記のハードコードされたアラートに単純に置き換えると、TypeError以前と同じメッセージが表示されます。

完全を期すために、ここに私の HTML ソースを示します。これは、react および react-boostv0.11.1 です。

パネルがReactクラスであるブートストラップアコーディオンを実行しようとしています。どういうわけかこれはうまくいきません：

http://jsfiddle.net/3azxcquh/

キーを使用して単一のWontWorkPanelパネルをレンダリングする React クラスですthis.props.pkey。

誰かが私が間違っていること、またはそれを改善する方法を説明してもらえますか?

ありがとう！

私は React を使用しており、React-Bootstrap コンポーネントを使用しています。

react-bootstrap.js ファイルを編集して「修正」(または「回避」) した React-Bootstrap ライブラリのいくつかの問題を見つけました。問題は、明日、react-bootstrap の新しいバージョンがリリースされた場合、react-bootstrap.js ファイルに記述したすべてのコードを新しいバージョンにコピーして貼り付ける/書き直す必要があることです。私はこれをしたくないので、react-bootstrap.jsファイルに触れずに、react-bootstrapが提供するコンポーネントクラスを変更する（つまり、レンダリング関数を変更する）方法があるかどうかをさまよっています。問題は、これを行う方法がわからないことです。少なくとも、コンポーネント クラスの内部動作を簡単に理解できないことです。どうすればこれを達成できるかについてのアイデアはありますか?

前もって感謝します！

反応用のreact.jsとブートストラップを使用してアプリを構築しています。クラス「成功」でテーブル行を作成しようとしています。ただし、react の tr タグに属性「class」を渡しても機能しません。翻訳された HTML には属性がまったくありません。

関連する JSFiddle - http://jsfiddle.net/7pqrwfch/

私は反応を学ぼうとしています。試しに、私は react-bootstrap を試していて、react-bootstrap アコーディオンを使用してアコーディオンを実装しようとしていました。最初に ButtonToolBar を使用してみましたが、うまくいきました。

しかし、react-bootstrap のアコーディオン コードが機能しませんでした。内容を表示していましたが、アコーディオンの場合とは異なります。コードは次のとおりです。

も使用してみましたが、同じように動作しました。私はここから助けを求めていました。

ここに同様の質問があります。しかし、私の場合、ReactBootstrp.Panel をカスタマイズしないと動作しません。

任意のアイデア、どうすれば機能させることができますか?

ログインにreact-bootstrapモーダルを使用しています。ユーザーが「ログイン」をクリックすると、リクエストがサーバーに送信されます。ログインが失敗した場合 - 状態を設定します - LOGIN_FAILED

この時点で、react アプリケーションが再レンダリングされます。

ログインに失敗した理由は、「ユーザー名またはパスワードが正しくありません」などのエラー メッセージとして表示されます。モーダルは既にアクティブであるため、[ログイン] ボタンの下にエラー メッセージを表示して再レンダリングします。

これは正常に機能します-モーダルを初めて使用するとき(またはページを更新した後)を除いて

この場合、モーダルは消えます。

私はそれをデバッグし、このコードが実行され、モーダルがアンマウントされるのを確認しました:

OverlayMixin.js

. . .

誰もこれに遭遇したことがありますか？OverlayMixin を使用して違いがあるかどうかを確認することを検討していますが、根本的な原因を知りたいです。

どんな助けでも感謝します。

LoginModal 反応コンポーネントは次のとおりです。

私は反応するのがかなり新しいので、これはかなり簡単なことかもしれません。現在、(ReactBootstrap から) Modal コンポーネントに取り組んでおり、Modal ダイアログ コンポーネント内で react-bootstrap Input コンポーネントを使用していtype=emailます。これにより、<form>要素内でフォームが送信されると検証がトリガーされ、検証が失敗した場合は入力コンポーネントの上にポップアップ タイプのメッセージが表示されます。ただし、要素内でこのコンポーネントを使用していないため<form>、ボタンをクリックしたときにこれをトリガーしたいと考えています。これは、問題を表すコードの一部です。

JSX:

ノート：

1. 入力フィールドはreact-bootstrap.Inputクラスです。
2. getDOMNode().focus() の概念はFacebook 反応ドキュメントからのものです

ボタンの onclick ハンドラーが実行されると、電子メールの入力フィールドにフォーカスが移るはずですが、フォーカスが移っていません。react-bootstrap 入力フィールド クラスが、ラッピング div 内で実際の DOM 入力フィールドをレンダリングしていることがわかりました。これは、console.log の出力です。

そのため、フォーカスがラッピング div に適用され、それが拒否されるため、入力がフォーカスを得ていないように見えます (document.activeElementコンソールで確認して使用します)。

input問題は、実際の要素にどのように焦点を合わせるかです。

注: 少し関係ありませんが、React はautoFocusプロパティを尊重します。これは、レンダリング直後にフォーカスを設定する必要がある場合に便利です。それでも、プログラムによる方法に代わるものではありません。

だから私はselectreactjsで要素の値を取得しようとしていますが、それを理解することはできません. はthis.refs.selectElement.getDOMNode().value常に として来ますundefined。フォーム上の他のすべてのコントロールは正常に機能しtextています。何か案は？select要素の値を経由で取得できず、イベントrefsを使用する必要がありますか?onChange

更新しました：

更新: 解決策 したがって、誰かが似たような問題に遭遇した場合、react-bootstrap を使用しているInput場合、ListGroup. それを取り出すか、すべてのInput要素を<form>タグで囲みます。これで私の問題は解決しました。すべての助けに感謝します。

最終的にアコーディオンに挿入されるパネルを作成したいアイテムの配列があります。

1つのファイルには、次のものがあります。

Content という別のファイルには、次のものがあります。

同じファイルにアコーディオンとパネルがある場合、それらは機能します。しかし、それらを2つのファイルに分割した後、マップを使用してパネルを生成すると、折りたたまれていないようです。