Javascript 反应模态：模态组件仅打开第一个单击的模态，而不打开其他模态

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

代码如下：

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;

从“../Modal/Modal”导入MyModal
从“/courses.json”导入课程列表；
类应用程序扩展组件{
状态={
搜索：“，
莫代尔：错，
};
选择Modal=（id）=>{
这是我的国家({
模态：{
[id]：！this.state.modal
}
})
}
rendercourse=课程=>{
var dep=course.dep；
返回(
{course.code}
{课程名称}
{course.ic}
单位：{course.unit}

更多信息
);
};
onchange=e=>{
this.setState（{search:e.target.value}）；
};
render（）{
const{search}=this.state；
const filteredcourses=courseList.filter（课程=>{
返回课程.name.toLowerCase（）.indexOf（search.toLowerCase（））！=-1；
});
返回(
搜索课程
{filteredcourses.map（课程=>{
返回此.rendercourse（课程）；
})}
);
}
}
导出默认应用程序；

这是模态分量：

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;

constmymodal=props=>{
函数displayInfo（）{
返回(
{props.coursename}
{props.courseic}
{props.courseunit}
{props.coursedep}
{props.coursecode}
);
}
函数关闭模式（e）{
e、 停止传播（）
props.closeModal（）
}
设模态=(
e、 stopPropagation（）}>
&时代；
{displayInfo（）}
)
返回（props.displaymodel？model:空）；
}
导出默认MyModal；

---

我希望每次单击按钮时，卡特定模式都会打开。

您的selectModal功能不会翻转每个模式的状态，而只翻转第一个模式的状态。 如果在状态中定义了任何模态（无论是第一个模态还是任何其他模态），则this.state.modal将计算为true。（至少包含某些内容的对象为true）

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

此.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

---

你能分享一个演示吗？比如codpen或codesandbox？