React模态。模态组件只打开第一次点击的模态，其他的都不打开。

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函数并没有翻转每个modal的状态，而只是翻转第一个modal的状态，如果在状态中定义了任何modal（无论是第一个还是其他modal），this.state.modal将评估为true。(至少有一些内容的对象是真)

要让你的所有模态同时被打开，只需在你的模态状态对象中翻转模态元素的值。

this.state.modal[id] 缺省情况下是未定义的，它将被评估为boolean false。

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

如果你想一次只打开一个模态，你应该简单地在状态中存储你的模态的id，而不是跟踪所有的模态。

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

要关闭一个模态，改变你的closeModal道具，以传递undefinedfalse代替模态ID，并改变你的模态显示道具，这样它将执行检查你的模态状态和coursecode是否匹配。

this.state.modal === course.code