Question

因此，在我的父类中，我目前有以下代码段：

...
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 ...

正如您所注意到的，我有一个'toEditBooking === true'，如果条件满足，则加载一个名为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">

这是第一次运行良好，但是，如果用户关闭子组件（EditBooking），我希望父组件更新其道具。

有没有容易实现的目标？

Answer 1

将另一个prop传递给名为onClose的子组件，这将是子组件在关闭时将调用的回调。

enctype="multipart/form-data"

然后修改EditBooking.handleClose

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

React / Material UI - 处理子组件中的打开/关闭框

1 个答案: