通过状态与属性控制模态框：Reactstrap模态框无法关闭问题咨询

嘿，我来帮你搞定这个Reactstrap模态框的问题！你遇到的核心问题是违反了React的单向数据流原则——子组件不能直接修改父组件传递过来的props，必须通过父组件提供的回调函数来更新状态，这样才能触发组件重新渲染。

问题根源 #

React中props是只读的，子组件直接修改props不会触发父组件的状态更新，所以组件不会重新渲染，模态框自然就关不掉。你需要让父组件掌控状态，子组件通过调用父组件传递的方法来触发状态变更。

具体解决方案 #

下面是完整的实现步骤和代码示例：

1. 父组件（App）添加模态框状态和控制方法

首先在父组件的state里添加控制模态框显示的状态，再定义一个切换状态的方法，把这个方法和状态一起传给子组件：

import React, { Component } from 'react';
import { Navbar, Nav, Button, Modal, ModalHeader, ModalBody } from 'reactstrap';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zipcode: '',
      zipEntered: false,
      modalOpen: false // 新增：控制模态框显示的状态
    };
    // 绑定this指向
    this.toggleModal = this.toggleModal.bind(this);
    this.handleZipChange = this.handleZipChange.bind(this);
  }

  // 新增：切换模态框状态的方法
  toggleModal() {
    this.setState(prevState => ({
      modalOpen: !prevState.modalOpen
    }));
  }

  handleZipChange(e) {
    this.setState({ zipcode: e.target.value });
  }

  render() {
    return (
      <div>
        {/* 导航栏组件：把toggleModal方法传进去 */}
        <CustomNavbar toggleModal={this.toggleModal} />
        
        {/* 模态框组件：绑定isOpen和toggle方法 */}
        <CustomModal 
          isOpen={this.state.modalOpen} 
          toggle={this.toggleModal} 
          zipcode={this.state.zipcode}
          handleZipChange={this.handleZipChange}
        />
      </div>
    );
  }
}

2. 子组件（导航栏）调用父组件的toggle方法

导航栏里的按钮点击时，调用父组件传过来的toggleModal方法，而不是自己修改props：

const CustomNavbar = ({ toggleModal }) => {
  return (
    <Navbar color="light" light expand="md">
      <Nav className="mr-auto" navbar>
        {/* 点击按钮触发模态框 */}
        <Button color="primary" onClick={toggleModal}>
          打开邮编输入模态框
        </Button>
      </Nav>
    </Navbar>
  );
};

3. 子组件（模态框）使用父组件的状态和方法

模态框的isOpen属性绑定父组件传的modalOpen状态，关闭按钮调用父组件的toggleModal方法：

const CustomModal = ({ isOpen, toggle, zipcode, handleZipChange }) => {
  return (
    <Modal isOpen={isOpen} toggle={toggle}>
      <ModalHeader toggle={toggle}>请输入邮编</ModalHeader>
      <ModalBody>
        <input 
          type="text" 
          value={zipcode} 
          onChange={handleZipChange}
          placeholder="输入邮编"
        />
        <Button color="success" onClick={toggle}>确认</Button>
      </ModalBody>
    </Modal>
  );
};

关键要点总结 #

• 父组件始终掌控状态（modalOpen），子组件只负责触发状态变更的动作（通过调用父组件的方法）
• 所有状态更新都通过setState完成，这样React才能检测到状态变化并重新渲染组件
• Reactstrap的Modal组件的isOpen属性必须绑定到父组件的状态，toggle属性绑定父组件的状态切换方法

内容的提问来源于stack exchange，提问作者Kyle Calica-St