는/재료 UI 반응 - 하위 구성 요소에서 열기/닫기 상자를 취급

Question

그래서 내 부모 클래스에서, 나는 현재 다음과 같은 코드 조각이 : 당신이 알다시피, 나는 'toEditBooking이

... 
return (
     <div className={prefix}> 
     {(toEditBooking===true ? <EditBooking editBooking={true} booking={selected}/> : null)} 
     <Paper style={header} rounded={false}> 
     <div className ={prefix+'-name'}>{name}</div> 
     <div className ={prefix+'-flight'}>{refNo}</div> 
     <div className ={prefix+'-initials'}>{initials}</div> 
     <div className ... 

을 === true '이면 조건이 충족되면 EditBooking이라는 구성 요소를로드하고 일련의 소품을 전달합니다. EditBooking라는 하위 구성 요소에서

, 나는 다음과 같은 한 : 사용자가 하위 구성 요소 (EditBooking)을 닫으면

componentWillReceiveProps =() => { 
    this.setState({open:this.props.editBooking}) 
} 

state = { 
    open: this.props.editBooking, 
}; 

handleClose =() => { 
    this.setState({open: false}); 
}; 
    render() { 
    const actions = [ 
     <FlatButton 
     label="Cancel" 
     primary={true} 
     onClick={this.handleClose} 
     />, 
     <FlatButton 
     label="Submit" 
     primary={true} 
     keyboardFocused={true} 
     onClick={this.handleClose} 
     />, 
    ]; 
    const booking = this.props.booking 
    console.log(booking) 
    return (

     <Dialog 
      title="Edit Booking" 
      autoDetectWindowHeight={false} 
      autoScrollBodyContent={false} 
      actions={actions} 
      modal={false} 
      open={this.state.open} 
      onRequestClose={this.handleClose} 
     > 
     <Paper className={prefix}> 
     <Subheader>Please update the correct details below:</Subheader> 
     <Subheader>Flight Details</Subheader> 
     <Row middle="xs"> 

이 처음으로 잘 작동은하지만, 내가가 상위 구성 요소를 원하는 그것의 소품을 업데이트하십시오.

달성하기가 쉬운가요?

Answer 1

onClose라는 하위 구성 요소에 다른 prop를 전달하면 하위 구성 요소가 닫을 때 호출 할 콜백이됩니다.

<EditBooking editBooking={true} booking={selected} onClose={() => { 
    // put all your logic to handle closing in the parent component 
    // e.g. this.setState({ editBooking: false }); 
}} /> 

그런 다음

handleClose =() => { 
    this.setState({open: false}); 
    this.props.onClose(); // call callback provided by parent 
}; 

EditBooking.handleClose을 수정