私は最初のReactアプリに取り組んでおり、ユーザーインタラクティブなポップオーバーを実装する方法に苦労しています。はい/いいえボタンを含むポップオーバーが必要なビジネス要件があります。このポップオーバーは、ビュー内のテーブルの行にあるボタン (「pobtn」) によってトリガーされます。
+- View ---------------------+ +- View ---------------------+
| +- Table ----------------+ | click | +- Table ----------------+ |
| | +- Row --------------+ | | --> | | +- Row --------------+ | |
| | | ... | | | pobtn | | | ... | | |
| | +--------------------+ | | | | +--------------------+ | |
| | +- Row --------------+ | | ,--------. +- Row --------------+ | |
| | | ... [pobtn] | | | | Yes/No |>| ... [pobtn] | | |
| | +--------------------+ | | `--------' +--------------------+ | |
| | +- Row --------------+ | | | | +- Row --------------+ | |
| | | ... | | | | | | ... | | |
| | +--------------------+ | | | | +--------------------+ | |
| | ... | | | | ... | |
| +------------------------+ | | +------------------------+ |
+----------------------------+ +----------------------------+
View、Table、および Row はすべてコンポーネントです。テーブル データは View で取得され、小道具を介して Table にプッシュされます。それは Row に細流します。これは、それを行う「正しい方法」であり、理にかなっています。そこには地方の州はあまりありません。
問題はポップオーバーに伴います。それを行う「正しい方法」は、各ボタンの横にポップオーバーコンポーネントを含め、非表示/表示のために小道具を押し下げるように思われると思います。これはあまり素晴らしいとは思えませんが、私の頭の中で正しい方法に近いものです。
ただし、react-bootstrap ポップオーバー (時間のために使用した) は、このようには機能しないようです。
var content = <MyRowPopoverContent/>;
<OverlayTrigger trigger='click' placement='left' overlay={<Popover>{content}</Popover>
<button className="btn btn-primary small"><i className="fa fa-trash-o"></i> Delete</button>
</OverlayTrigger>
トリガー ボタンをクリックすると、本体にアタッチされた DIV が作成され、通常の動作 (非反応) と同様に、トリガー要素の隣に配置されます。DIV を別のコンテナーにアタッチできるように見えますが、それは十分に文書化されていません。とにかく、オーバーレイ コンテンツ (つまり、MyRowPopoverContent) は次のようなものです。
this.handleNoClick: function(){
// Re-click the button to close; gross.
$('[data-row-id="'+this.props.row.key+'"]').find('.fa-trash-o').parents('button').first().click();
},
this.handleYesClick: function(){
// Do stuff...update store which would re-render the view.
// Re-click the button to close; gross.
$('[data-row-id="'+this.props.row.key+'"]').find('.fa-trash-o').parents('button').first().click();
},
this.render: function(){
<div>
<div>Are you sure?</div>
<input placeholder="Reason"/>
<button onClick={this.handleYesClick}>Yes</button> <button onClick={this.handleNoClick}>No</button>
</div>
}
関数の実装を開始し、handleYesClickエラー処理や非同期イベントなどを実行しようとしましたが、すべてが非常に大ざっぱであるか、少なくとも壊れやすいようです。問題は次のとおりだと思います: インタラクティブなポップオーバーが必要なのですが、どうすればよいですか? ポップアップはボタンまたは行のローカル状態の一部であるように思われます。または、ほとんどの場合と同様に、これが一番上に忍び寄る可能性があります。
react-bootstrap は既に 1 つを提供しているので、それを使用すると便利ですが、他のすべてのものと「接続」する方法がわかりません。
更新:ケーキになる単純な静的ポップオーバーの場合。小道具を介して表示/非表示にし、クリックするpobtnのは非常に簡単です。私が苦労している部分は、ポップオーバー内のインタラクティブなコンテンツです。何か(ストアを更新するイベントなど) を実行したり、スピナーを表示したり、何かが機能したかどうかを判断したり、エラー メッセージを表示したり、消えたりします。「いいえ」ボタンをクリックしてポップオーバーを非表示にすることでさえ明確ではありません（現在、jQueryと.click()ボタンをもう一度使用して見つけました）親からの小道具を介してすべてを行うのは怖いようです...