反应模态:模态组件只打开第一次点击的模态，没有其他的

Question

我是StackOverflow的新手，所以请原谅我对问题的糟糕措辞。 我目前正在学习 React，作为一个小项目，我正在创建一个课程搜索应用程序，该应用程序将根据用户从 JSON 文件中输入的输入过滤课程并显示它们。 我已经为每个卡组件添加了模态，这些模态应该在单击卡内的按钮时打开。 我面临的问题是，当我单击按钮时，它只打开第一个单击的模态，而没有其他按钮。

这是代码：

import MyModal from '../Modal/Modal'
import courseList from "./courses.json";
class App extends Component {
state = {
search: "",
modal: false,
};
selectModal = (id) => {
this.setState({
modal: {
[id]: !this.state.modal
}
})
}

rendercourse = course => {
var dep = course.dep;
return (
<div className="col-md-3" style={{ marginTop: "20px" }}>
<Card className="card">
<CardBody className={dep}>
<CardTitle title={course.id}>
{course.code}
</CardTitle>
<CardText className="title">{course.name}</CardText>
<p className="ic">{course.ic}</p>
Units: {course.unit}<br />
<button onClick= {
this.selectModal.bind(this, course.code)}>More Info</button>
</CardBody>
<MyModal 
displayModal={this.state.modal[course.code]}
coursename={course.name}
coursecode={course.code}
courseic={course.ic}
coursedep={course.dep}
courseunit={course.unit}
closeModal={this.selectModal} />
</Card>
</div>
);
};
onchange = e => {
this.setState({ search: e.target.value });
};
render() {
const { search } = this.state;
const filteredcourses = courseList.filter(course => {
return course.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
});
return (
<div className="flyout">
<main style={{ marginTop: "4rem" }}>
<div className="container">
<div className="row">
<div className="col-12">
<center>
<h3>
Search for a course
</h3>
</center>
</div>
<div className="col">
<Input
label="Enter the name of the course"
icon="search" className="in"
onChange={this.onchange}
/>
</div>
<div className="col" />
</div>
<div className="row">
{filteredcourses.map(course => {
return this.rendercourse(course);
})}
</div>
</div>
</main>
</div>
);
}
}
export default App;

这是模态组件：

const MyModal = props => {

function displayInfo () {
return (
<div>
<div>{props.coursename}</div>
<div>{props.courseic}</div>
<div>{props.courseunit}</div>
<div>{props.coursedep}</div>
<div>{props.coursecode}</div>
</div>
);
}
function closeModal (e) {
e.stopPropagation()
props.closeModal()
}
let modal = (
<div 
className="modal"
onClick={ closeModal }>
<div className="modal-content"
onClick={ e => e.stopPropagation() }>
<span 
className="close"
onClick={ closeModal }>&times;
</span>
<div className="modal-flex">
{displayInfo()}
</div>
</div>
</div>
)
return ( props.displayModal ? modal : null);
}
export default MyModal;

我希望每当单击按钮时都会打开特定于卡片的模式。

Answer 1

你的 selectModal 函数不会翻转每个模态的状态，而只会翻转第一个模态的状态。 如果在状态中定义了任何模态(无论是第一个模态还是任何其他模态(，则 this.state.modal 的计算结果将为 true。(至少具有某些内容的对象为 true(

要允许同时打开所有模态，只需翻转模态状态对象中模态元素的值即可。

默认情况下，this.state.modal[id]是未定义的，其计算结果将为布尔值 false。

selectModal = (id) => {
this.setState({
modal: {
[id]: !this.state.modal[id]
}
})
}

如果您宁愿一次只打开一个模态，您应该简单地将模态的 id 存储在该州中，而不是跟踪其中的所有模态：

selectModal = (id) => {
this.setState({
modal: id
})
}

要关闭模态，请将 closeModal 道具更改为传递 undefined/false 而不是模态 ID 并更改模态显示道具，以便它执行检查您的模态状态和课程代码是否匹配：

this.state.modal === course.code