如何在React Js中的map函数内部使用Bootstrap Modal来呈现单个元素? [英] How to use Bootstrap Modal inside map function in React Js to render indivisual elements?
问题描述
因此，我正在尝试使用react js创建一个博客应用程序.我正在使用地图功能来显示所有提要(我使用axios提取了这些提要).我将这些提要存储在状态中，并将其作为道具传递. 现在的问题是:单击按钮时，我试图在地图功能中使用引导模式来显示博客的内容.我将模式存储在单独的组件中.但是，当我单击按钮时，由于具有map功能，它会遍历所有元素，并显示模式内页面中每个元素的最后输入的数据(博客内容).
So I am trying to make a blog application using react js. I am using map function to display all feeds (which I fetched using axios). I am storing these feeds in state and passing them as props. Now the problem is: I am trying to use bootstrap modals in map function to show the content of the blog when button is clicked. I am storing the modal in separate component. However when I click on the button, due to the map function it is iterating through all the elements and showing the last entered data (blog content) for every element in the page inside the modal.
Feed.jsx:
class Feed extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
modalId: null
};
}
showModal = (e, index) => {
this.setState({ showModal: true, modalId: index });
console.log("Index: " + index);
};
hideModal = (e, index) => {
this.setState({ showModal: false, modalId: index });
console.log("Index: " + index);
};
disp(e) {
console.log("function: " + e._id);
}
showArticle(e) {}
render() {
let modalClose = () => this.setState({ showModal: false });
return (
<div className="container-fluid">
<ul className="list-group" key={this.props.feedData.id}>
{this.props.feedData.map(feed => (
<li
className="list-group-item"
style={styles.container}
key={feed.id}
>
<div className="container">
<div className="col-md-12">
<button
type="button"
className="btn btn-default"
onClick={() => this.setState({ showModal: true })}
>
<h3 style={styles.heading}>{feed.title} </h3>
</button>
<p>by - {feed.author}</p>
<p>{feed.subTitle}</p>
<div>
<span className="badge">Posted {feed.date}</span>
<div className="pull-right">
<button className="btn btn-primary">Upvote</button>{" "}
<button className="btn btn-info">Comment</button>{" "}
<button className="btn btn-danger">Report</button>{" "}
</div>
</div>
<br />
<Article
show={this.state.showModal}
onHide={modalClose}
data={feed}
/>
{this.disp(feed)}
</div>
<hr />
</div>
</li>
))}
</ul>
</div>
);
}
}
Article.jsx
Article.jsx
class Article extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
console.log("Data from Article.jsx: " + this.props.data.title);
return (
<div className="article">
<Modal
{...this.props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{this.props.data.title}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4> {this.props.data.subTitle} </h4>
<p>{this.props.data.content}</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
我正在从一个父组件获取feedData，该组件的提要以获取API的状态存储. 控制台:
I am getting feedData from a parent component which has feeds stored in state from fetch api. console:
The development server has disconnected.
Refresh the page if necessary. webpackHotDevClient.js:65
function: 5cf24b53431f5f089496354b Feed.jsx:25
function: 5cf7a4b26332500efc0d1919 Feed.jsx:25
function: 5cfb558d9198991ea00a9452 Feed.jsx:25
Data from Article.jsx: Liberalism and Loyality Article.jsx:10
Data from Article.jsx: Made my first website Article.jsx:10
Data from Article.jsx: IOT project for tracking heart beat and monitoring data on phone.
如何使用模式渲染单个提要?
How do I use modal for rendering individual feeds ?
推荐答案
这是因为，当您单击循环时，已经运行，当您单击按钮时，它将呈现最后一个项目数据.更好的方法是不要在每个循环方法上都呈现模态，而应在Feed级别组件上呈现.
Its because when you click on the loop is already run when you click on button its rendering the last item data. Better approach would be do not render modal on each loop approach instead it should render on Feed Level Component.
class Feed extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
modalId: null,
data:{}
};
}
showModal = (e, index) => {
this.setState({ showModal: true, modalId: index });
console.log("Index: " + index);
};
hideModal = (e, index) => {
this.setState({ showModal: false, modalId: index });
console.log("Index: " + index);
};
disp(e) {
console.log("function: " + e._id);
}
showArticle(e) {}
let modalClose = () => this.setState({ showModal: false }); //change
render() {
return (
<div className="container-fluid">
<ul className="list-group" key={this.props.feedData.id}>
{this.props.feedData.map(feed => (
<li
className="list-group-item"
style={styles.container}
key={feed.id}
>
<div className="container">
<div className="col-md-12">
<button
type="button"
className="btn btn-default"
onClick={() => this.setState({ showModal:
true,data:feed })} //change
>
<h3 style={styles.heading}>{feed.title} </h3>
</button>
<p>by - {feed.author}</p>
<p>{feed.subTitle}</p>
<div>
<span className="badge">Posted {feed.date}</span>
<div className="pull-right">
<button className="btn btn-primary">Upvote</button>{" "}
<button className="btn btn-info">Comment</button>{" "}
<button className="btn btn-danger">Report</button>{" "}
</div>
</div>
<br />
{this.disp(feed)}
</div>
<hr />
</div>
</li>
))}
</ul>
<Article
show={this.state.showModal}
onHide={this.modalClose}
data={this.state.data}
/>
</div>
);
}
}
注意:永远不要在渲染器内设置状态.它将使您的应用程序崩溃.(此处为modalClose函数)
Note : Never setState inside render. It will make your app crash.(here modalClose function)
这篇关于如何在React Js中的map函数内部使用Bootstrap Modal来呈现单个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
