在 reactjs 中获取引导模式关闭事件

Question

我正在使用 React 16 和 Bootstrap 4。 我正在使用引导模式来显示一些值。每当模式关闭时，我都需要重置这些值。

对于 Modal，我创建了一个单独的组件。我不想使用React-Modal，因为我获得了当前模式中的所有功能。

我知道javascript 是使用以下代码实现的：

$(".modal").on("hidden.bs.modal"){
    //reset values here
};

但我不知道在 ReactJS 中这是如何实现的？

下面是我的模态代码：

<div className="modal fade modal-flex" id="large-Modal-OneUser" tabIndex={-1} role="dialog">
            <div className="modal-dialog modal-lg" role="document">
                <div className="modal-content">
                    <div className="modal-header" style={{display: 'block'}}>
                        <div className="row">
                            <div className="col-md-6">
                                <h2 style={{fontWeight:600}}>{newTimelineData.length > 0 ? newTimelineData[0].candidateName : ""}</h2>
                            </div>
                            <div className="col-md-6">
                                <span style={{display: 'inline-flex',alignItems: 'center',float:'right'}}><h4 style={{paddingRight:20}}>{isNotEmpty(this.state.scheduledFor) ? moment(this.state.scheduledFor).format("DD-MMM-YYYY"):this.checkScheduledFor(newTimelineData)}</h4>
                                    <h3 style={{paddingRight: 10}}>{isNotEmpty(this.state.probability) ? this.getProbabilityHTML() : this.checkProbability(newTimelineData)}</h3>
                                    {/*<button type="button" className="close" data-dismiss="modal" aria-label="Close" style={{marginTop: 0,marginBottom: 10}}>
                                    <span aria-hidden="true">×</span>
                                </button>*/}
                                </span>

                            </div>
                        </div>
                    </div>
                    <div className="modal-body">
                        <div className="col-md-12">
                            {/*<div className="card">*/}
                            {/*<div className="card-block">*/}
                                    {/* Horizontal Timeline start */}
                                    <div className="cd-horizontal-timeline">
                                        <div className="timeline">
                                            <div className="events-wrapper">
                                                <div className="events" id="foo">
                                                    <ol>
                                                        {newTimelineData.map((item, index) => (
                                                            <li key={item.id}>
                                                                <a
                                                                    href="#0" onClick={()=> this.setHeaders(item)}
                                                                    data-date={moment(item.scheduledFor).format('DD/MM/YYYY')}
                                                                    className={index === 0 ? 'selected' : null}>
                                                                    <Moment unix format="DD MMM">
                                                                        {item.scheduledFor / 1000}
                                                                    </Moment>
                                                                </a>
                                                            </li>
                                                        ))}
                                                    </ol>
                                                    <span className="filling-line" aria-hidden="true" />
                                                </div>
                                                {/* .events */}
                                            </div>
                                            {/* .events-wrapper */}
                                            <ul className="cd-timeline-navigation">
                                                <li>
                                                    <a href="#0" className="prev inactive">
                                                        Prev
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#0" className="next">
                                                        Next
                                                    </a>
                                                </li>
                                            </ul>
                                            {/* .cd-timeline-navigation */}
                                        </div>
                                        {/* .timeline */}
                                        <div className="events-content">
                                            <ol>
                                                {newTimelineData.map((item, index) => (
                                                    <li
                                                        key={item.id}
                                                        className={index === 0 ? 'selected' : null}
                                                        data-date={moment(item.scheduledFor).format('DD/MM/YYYY')}>
                                                        <div className="row">
                                                            <div className="col-sm-8" style={{fontSize:'1rem',paddingLeft: 3,paddingRight:0}}><b>Job</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: {item.jobName}</div>
                                                            {isNotEmpty(joiningDate) && <div className="col-sm-4" style={{fontSize:'1rem',paddingLeft: 3,paddingRight:0}}><b>Joined Date &nbsp;: </b>{joiningDate}</div>}
                                                        </div>
                                                        <div className="row">
                                                            <div className="col-sm-8" style={{fontSize:'1rem',padding:0}}><b>Stage</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: {this.props.stage}</div>
                                                            {isNotEmpty(offerDate) && <div className="col-sm-4" style={{fontSize:'1rem',paddingLeft: 0,paddingRight:0}}><b>Offer Date &nbsp;&nbsp;&nbsp;&nbsp;: </b>{offerDate}</div>}
                                                        </div>
                                                        <br></br>
                                                        <div className="row">
                                                            <div className="col-sm-12" style={{fontSize:'1rem',paddingLeft: 0}}><b>Comments</b> :<br></br>{item.comments}</div>
                                                        </div>
                                                    </li>
                                                ))}
                                            </ol>
                                        </div>
                                        {/* .events-content */}
                                    </div>

                                    {/* Horizontal Timeline end */}
                                    {/*</div>*/}
                                    {/*</div>*/}
                        </div>
                    </div>
                    <div className="modal-footer">
                        <button style={{backgroundColor: '#8080808f',borderColor:'#8080808f'}}
                            type="button"
                            className="btn btn-primary waves-effect waves-light"
                            data-dismiss="modal">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>

谁能帮忙？

请参阅下面的快照，了解@Jayavel. 建议的我尝试过的解决方法

Answer 1

实施了一个小变通方法，希望它能够满足您的需求，据我了解，您加载带有状态的模态体，用户将更改某些内容，并将它们存储在相同的状态。

在关闭模式（关闭按钮）时，您需要重置初始状态，即重置为默认值。

对吗！！！ check this demo

你需要的是，

存储您的默认状态，如下所示：

const initialState = {
     isOpen: false, 
     value: "defaultvalue"
};

在组件中：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = initialState; // stored defaultstate
  }

  toggleModal = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  toggleModalClose = () => {  // modal close to reset input val
    this.setState(initialState);
  }

  handleChange = (e) => {
    this.setState({
      value: e.target.value //input new value
    });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.toggleModal}>
          Open the modal
        </button>

        <Modal show={this.state.isOpen}
          onClose={this.toggleModalClose}>
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </Modal>
      </div>
    );
  }
}

希望这会有所帮助。