Question

我有一个带有学生图标的课程列表。单击学生图标时，它将打开一个模式，并显示课程中所有分配的学生。

我遇到的问题是，当我单击某门课程以打开模态时，它为所有其他课程打开了模态。我知道这与国家行为有关，但是我似乎无法弄清楚如何最好地解决这个问题。

以下是我的代码：

A1

模式：

class CourseDetails extends React.Component {
    constructor(props) {
        super(props);
        autobind(this);

        this.state = { openStudentsAssignedToCourseModal: false };
    }

    closeStudentsAssignedToCourseModal() {
        this.setState({ openStudentsAssignedToCourseModal: false });
    }

    render() {
        const { store } = this.props;
        const { openStudentsAssignedToCourseModal } = this.state;

        return store.allCourses.map((course) => {

            return (
                <Container key={course.id}>
                <p>{course.name}</p>
                    <UsersIcon
                        size={25}
                        onClick={() => {
                            if (course.listOfStudents.length > 0)
                                this.setState({
                                    openStudentsAssignedToCourseModal: true
                                });
                        }}
                    />
                    {openStudentsAssignedToCourseModal && (
                        <StudentsOnCourseModal
                            course={course}
                            isOpen
                            close={() => {
                                this.closeEmployeesAssignedModal();
                            }}
                        />
                    )}
                </Container>
            );
        });
    }
}

Answer 1

我没有捕获所选的课程，因此打开了所有课程。通过引入新的状态来捕获选定的值并将其传递到模式中来对其进行了修复。

React组件打开所有子状态

1 个答案: