用状态和道具控制模态

Question

我正在尝试使用Reactstrap来创建在导航栏中导航时弹出的模态。

我的策略是更改父组件中的状态，并将它们作为道具传递给isOpen属性以控制打开模态。

问题是改变子组件中的道具不会重新渲染组件，所以我无法关闭模态！

家长控制器：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      zipcode : '',
      zipEntered: false
      };
    this.onZipCodeChange = this.onZipCodeChange.bind(this);
    this.isAuth = this.isAuth.bind(this);
  }

  componentDidMount() {
    this.setState({signup:false});
    if(this.state.zipcode !== '' || this.state.zipcode !== undefined){
      this.setState({zipEntered:true});
      this.setState({zipcode:this.state.zipcode});
    } else {
      this.setState({zipcode: '' });
      this.setState({zipEntered:false});
    }
  }

  onZipCodeChange(zip){
    //console.log('App has detected ZipCode Change: '+zip);
    this.setState({zipcode: zip});
    this.setState({zipEntered:false});
  }

  isAuth(token){
    console.log("App has token: "+ token);
    //pull data from token
  }

  render() {
    return (
        <div className="App">
          <header>
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
              <a className="navbar-brand" href="#">InkSpace</a>
              <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
              </button>
              <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav">
                <li className="nav-item">
                  <a className="nav-link" onClick={() => {this.setState({zipEntered:true})}}>Change Zipcode</a>
                </li>
                  <li className="nav-item">
                    <a className="nav-link" onClick={() => {this.setState({signup:true})}}>Tattooist</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#">FAQ</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link disabled" href="#">Shop</a>
                  </li>
                </ul>
              </div>
            </nav>
          </header>
          <ZipCode onSubmit={this.onZipCodeChange} isOpen={this.state.zipEntered} />
          <GMap zipcode={this.state.zipcode} />
      </div>
    );
  }
}

export default App;

儿童控制器：

class ZipCode extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        zipcode:''          };
      this.submitZipCode = this.submitZipCode.bind(this);
      this.zipcodeChange = this.zipcodeChange.bind(this);
    }

  submitZipCode(e){
  //  console.log('submitting zipcode');
    e.preventDefault();
    const { onSubmit } = this.props; //pull out to call method it is linked to
    onSubmit(this.state.zipcode);
    this.setState({isOpen:false});
  }

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

  render(){
    return(
      <div>
        <Modal isOpen={this.props.isOpen} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>ZipCode</ModalHeader>
          <ModalBody>
           <form  onSubmit={this.submitZipCode}>
               <label>Zip Code</label>
               <input
                 type="input"
                 name="zipcode"
                 value={this.state.zipcode}
                 onChange={this.zipcodeChange}
                />
              <Button color="primary" type="submit" className='btn btn-success'>Submit</Button>
            </form>
          </ModalBody>
        </Modal>
      </div>

    );
  }
}

export default ZipCode;