상태 및 props으로 모달 제어

질문

 

탐색 막대를 탐색 할 때 팝업되는 모달을 만들기 위해 Reactstrap을 사용하려고합니다.

내 전략은 부모 component의 상태를 변경하고 모달 열기를 제어하기 위해 props으로 isOpen 속성에 전달하는 것입니다.

문제는 자식 component의 props을 변경해도 component를 다시 렌더링하지 않으므로 모달을 닫을 수 없다는 것입니다!

부모 컨트롤러 :

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;

 

 

 

 

 

출처 : https://stackoverflow.com/questions/50197395/controlling-modals-with-states-and-props