反应情态：情态组件只打开第一个点击的情态，其他都不打开

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。（至少有部分内容的对象为真）

要允许同时打开所有的情态，只需在modal state对象中翻转modal元素的值。

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

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

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

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

要关闭一个模态，请更改closeModal prop以传递undefined/false而不是模态ID，并更改您的模态显示prop，这样它将执行检查您的模态状态和coursecode是否匹配：

this.state.modal === course.code