我在reactjs数组中有9条记录,每条记录都有自己的Bootstrap Modal View按钮,每个记录都有显示。
{ "name" : "Tony", "Age" : "18"},
{ "name" : "John", "Age" : "21" },
{ "name" : "Luke", "Age" : "78" },
{ "name" : "Mark", "Age" : "90" },
{ "name" : "Jame", "Age" : "87" },
{ "name" : "Franco", "Age" : "34" },
{ "name" : "Franco", "Age" : "34" },
{ "name" : "Biggard", "Age" : "19" },
{ "name" : "tom", "Age" : "89" },
当我单击“第一个模态视图”按钮时,我得到了正确的记录(姓名= Tony,年龄= 18)。
当我单击第二条记录“模态视图”按钮时,应该在模态中显示第二条记录(Name = John,Age = 21),但它显示的是第一条记录(姓名= Tony,年龄= 18)。因此,无论单击哪个视图按钮,“模式视图”始终显示第一条记录。
这是整个代码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.pic{
background:blue; color:white;}
</style>
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="app"></div>
<script type="text/babel">
class Application extends React.Component {
constructor(props) {
super(props)
this.state = {rec : [
{ "name" : "Tony", "Age" : "18"},
{ "name" : "John", "Age" : "21" },
{ "name" : "Luke", "Age" : "78" },
{ "name" : "Mark", "Age" : "90" },
{ "name" : "Jame", "Age" : "87" },
{ "name" : "Franco", "Age" : "34" },
{ "name" : "Franco", "Age" : "34" },
{ "name" : "Biggard", "Age" : "19" },
{ "name" : "tom", "Age" : "89" },
],
};
this.viewData = this.viewData.bind(this);
}
// Display Data in a Modal when View button is Clicked
viewData() {
//this.see=this.state.rec[0].name;
console.log(this.see);
}
render() {
return <div className="container">
<div>
<h3>List of Records</h3>
<ul>
{this.state.rec.map((obj, i) =>
<li key={i}>{obj.name} - {obj.Age} <button type="button" onClick={this.viewData} className="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">view from Modal</button></li>
)}
</ul>
</div>
//start Bootstrap modal
<div className="modal" id="myModal">
<div className="modal-dialog">
<div see={this.see} className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Show Records in Modal</h4>
<button type="button" className="close" data-dismiss="modal">×</button>
</div>
<div className="modal-body">
Name: {this.state.rec[0].name} <br />
Age: {this.state.rec[0].Age} <br />
</div>
<div className="modal-footer">
<button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
// End Bootstrap Modal
</div>;
}
}
ReactDOM.render(<Application />, document.getElementById('app'));
</script>
</body>
</html>
答案 0 :(得分:1)
您需要向状态currentRec
添加一个属性,以跟踪单击的数组项。
同样,您需要更改viewData()
以接受单击了哪个数组项的索引。拥有此值后,可以将其设置为currentRec
以了解要显示的数组项。
之后,您可以使用此currentRec
在模态主体中显示当前数组项,而不必总是通过[0]
返回数组中的第一个元素。
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
rec: [
{ name: "Tony", Age: "18" },
{ name: "John", Age: "21" },
{ name: "Luke", Age: "78" },
{ name: "Mark", Age: "90" },
{ name: "Jame", Age: "87" },
{ name: "Franco", Age: "34" },
{ name: "Franco", Age: "34" },
{ name: "Biggard", Age: "19" },
{ name: "tom", Age: "89" }
],
currentRec: undefined
};
this.viewData = this.viewData.bind(this);
}
// Display Data in a Modal when View button is Clicked
viewData = (i) => {
this.setState({ currentRec: i });
console.log(`Selected record index: ${i}`);
}
render() {
return (
<div className="container">
<div>
<h3>List of Records</h3>
<ul>
{this.state.rec.map((obj, i) => (
<li key={i}>
{obj.name} - {obj.Age}{" "}
<button
type="button"
onClick={() => { this.viewData(i); }}
className="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal"
>
view from Modal
</button>
</li>
))}
</ul>
</div>
<div className="modal" id="myModal">
<div className="modal-dialog">
<div see={this.see} className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Show Records in Modal</h4>
<button type="button" className="close" data-dismiss="modal">
×
</button>
</div>
{this.state.currentRec !== undefined &&
<div className="modal-body">
Name: {this.state.rec[this.state.currentRec].name} <br />
Age: {this.state.rec[this.state.currentRec].Age} <br />
</div>}
<div className="modal-footer">
<button
type="button"
className="btn btn-danger"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<Application/>,
document.body
);
<div class="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>