时间戳

首页 > 解决方案 > React Modals：Modal 组件只打开第一次点击的 modal 没有别的

javascript - React Modals：Modal 组件只打开第一次点击的 modal 没有别的

问题描述

我是 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;

我希望在单击按钮时打开特定于卡片的模式。

标签： javascriptreactjsreact-reduxreact-bootstrap

解决方案

您的 selectModal 函数不会翻转每个模态的状态，而只会翻转第一个模态的状态。如果在状态中定义了任何模态（无论是第一个模态还是任何其他模态）， this.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 道具以传递 undefined/false 而不是模态 ID 并更改您的模态显示道具，以便它执行检查您的模态状态和课程代码是否匹配：

this.state.modal === course.code

推荐阅读