我正在研究一个实验项目,我正在尝试使用javascript,当我遇到这个奇怪的事情,我没有解释它的行为。我正在使用带CDN的bootstrap 4。 SandboxCode
import React from 'react';
const Button = props => {
const showProps = e => {
e.preventDefault();
console.log(props.day, props.slot);
};
return (
<div>
<div data-toggle="modal" data-target="#myModal">
Click Me!
</div>
<div className="modal fade" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Add / Edit Slot</h4>
<button type="button" className="close" data-dismiss="modal">
×
</button>
</div>
<div className="modal-body">
<form>
<div className="form-group">
<label>
<h6>Faculty</h6>
</label>
</div>
<div className="form-group">
<label>
<h6>Venue</h6>
</label>
</div>
<div className="form-group">
<label>
<h6>Subject</h6>
</label>
</div>
<button
type="submit"
className="btn btn-success btn-cons btn-block"
onClick={showProps}
>
Save
</button>
</form>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-danger btn-block"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
);
};
export default Button;
这个组件提供了一个按钮,当在模态中单击“保存”按钮然后它控制台的两个道具(日期和插槽)时打开模态。
它的父组件是主要组件,然后在App.js文件中使用它来呈现。
import React, { Component } from "react";
import Button from "./Button/Button";
export default class Main extends Component {
render() {
return ["Monday", "Tuesday"].map((day, dayIndex) => {
return [0, 1].map((slot, slotIndex) => {
return (
<Button key={dayIndex + "-" + slotIndex} day={day} slot={slotIndex} />
);
});
});
}
}
预期结果: - 单击按钮并单击模态中的保存按钮后,每个按钮应根据道具控制不同的数据。
输出: - 所有保存按钮单击输出相同的内容。我已经被困在这两天了,我已经尝试了很多东西。
这是一个id
问题:)。看下面的代码:
<div data-toggle="modal" data-target="#myModal">
使id
对于每个模态都是唯一的,否则无论你点击哪个按钮,它都会为它找到的第一个元素提供给定id的模态。
看到这个sandbox中的固定代码,基本上改变了这两行以确保唯一的模态id:
<div data-toggle="modal" data-target={`#myModal_${props.day}_${props.slot}`}>
和
<div className="modal fade" id={`myModal_${props.day}_${props.slot}`}>