私はリアクションブートストラップとカルーセルを使用しています。選択からカルーセル項目とオープンモーダルを選択したいが、私は最初Carousel.Item
コンポーネントをラップし、モーダルを追加し、包まれたインスタンスにハンドラをクリックする任意の助けカルーセル - 選択からカルーセルアイテムとオープンモーダルを選択する方法
1
A
答えて
0
を行うことができない、多分次
class Item extends Component {
constructor() {
super();
this.state = {
show: false
};
}
render() {
const { caption, title, src, alt, className, modal } = this.props;
return (
<Carousel.Item>
<img
className={className}
src={src}
alt={alt}
onClick={e => this.setState({ show: true })}
/>
<Carousel.Caption>
<h1>
{title}
</h1>
<p>
{caption}
</p>
</Carousel.Caption>
{/* --> modal instance <-- */}
<Modal
show={this.state.show}
onHide={() => this.setState({ show: false })}
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title">
{modal.title}
</Modal.Title>
</Modal.Header>
<Modal.Body>
{modal.content}
</Modal.Body>
<Modal.Footer>
<Button onClick={() => this.setState({ show: false })}>
Close
</Button>
</Modal.Footer>
</Modal>
{/* --> end modal instance <-- */}
</Carousel.Item>
);
}
}
のようなもの次
など
class MyCarousel extends Component {
constructor() {
super();
this.state = {
items: [
{
caption: "blah 1",
title: "blah 1",
src: "/path/to/image",
alt: "blah 1"
},
{
caption: "blah 2",
title: "blah 2",
src: "/path/to/another/image",
alt: "blah 2"
}
]
};
this.renderItems = this.renderItems.bind(this);
}
renderItems() {
const { items } = this.state;
items.map(item => {
const modal = {
title: item.title,
content: item.caption
};
return <Item key={item.title} {...item} modal={modal} />;
});
}
render() {
return (
<Carousel>
{this.renderItems()}
</Carousel>
);
}
}
関連する問題
- 1. 滑らかなカルーセル選択オプション
- 2. ajaxから選択ボックスで値を選択する方法
- 3. 選択から複数の段落を選択する方法
- 4. d3 js選択から選択する方法
- 5. JPA(選択)から選択
- 6. 列全体からデータを選択し、選択タグに別の選択肢として表示する方法。
- 7. 選択値から選択した値を選択します。
- 8. 選択欄から項目を選択
- 9. CListCtrl - 選択方法の選択
- 10. podscmsが使用するテンプレートページを選択する方法とその中から選択する方法
- 11. 選択から遷移を作成する方法(d3選択モジュールのインポート)
- 12. Prototype - ドロップダウンから選択した値を選択解除する方法
- 13. マトリックスから選択インデックスの基本列を選択する方法は?
- 14. データベースからドメイン列を選択すると、データベースから行を選択する
- 15. 最初の選択から選択オプションを選択したときに以前に選択したオプションを無効にする方法
- 16. Oracle:タイトルから選択OK、ビューから選択する.0行
- 17. SSRSのドロップダウンリストで2つのSSASメジャー選択から選択する方法は?
- 18. htmlを選択してブートストラップを選択する方法
- 19. 選択された選択肢の中から選択された項目を取り出す方法
- 20. Jquery UIで選択した要素を選択する方法
- 21. フィールド/テトリムの長さを選択して選択する方法
- 22. 親のドロップダウン選択値を選択する方法
- 23. 選択タイプを選択する方法= multiple - jQuery
- 24. 選択したオプションを複数選択する方法
- 25. Android:選択肢を一度に選択する方法AlertDialog?
- 26. PrimeNG Datatableで行を選択/選択解除する方法は?
- 27. 選択オプションで選択色を変更する方法は?
- 28. 複数を選択:選択/解除する方法(JavaScript)
- 29. 次のページで同じ選択オプションを選択する方法
- 30. カスタムチェックボックスボタンでテーブルビューの行選択を選択する方法は?
シェアの詳細情報、コードスニペットを、次のように私は私の
Carousel
コンポーネントでこれを使用することになり、 '反応-modal'パッケージは、モーダルのための使用を作るための良いコンポーネントです。 –const MyCarousel2 =({items})=>
ここに私のカルーセルがカルーセルをクリックしたいアイテムのリストを表示しています。選択されたアイテムのプロパティを取得し、プロパティをバイパスするモーダルを開いてください。 – Vin