Question

您好我使用反应bootstrap模式。在我的页面上，我有一个<selectList />组件，其中列出了类别。我附近有一个Add +按钮。当我单击添加时，我打开模态中的<CategoryAdd />组件。当我添加类别时，我调用close方法并更新isDataChangeKey值并将其传递给selectList。 selectList检查值，如果需要，使用ajax调用刷新并填充数据。我想我正在努力做到这一点。有没有简单的方法呢？

我的方式：

的初始化状态：

getInitialState: function() {
  var initial = {
     "isDataChangeKey ": 0
  };
  return initial;
},

主页：

   <div className="col-xs-4">
     <SelectList
       nullable={true}
       dataStateKey={this.state.isDataChangeKey}
       dataUrl="/Category/GetAll"
       defaultValue={this.state.CategoryID}
       id="CategoryID"
       name="CategoryID"
       optionValue="CategoryID"
       optionText="CategoryName"
     />
   </div>

   <div className="col-xs-2">
     <ModalTrigger
       modal={
         <ModelComponent
           componentName={CategoryAdd}
           onClose={this.handlePopupClose.bind(null,'category')}
         />}
     >
       <a
         data-toggle="modal"
         href="#deleteModal"
         className="btn btn-orange btn-icon bottom15 right15"
       >
         <i className="fa fa-plus"></i> &nbsp; <span>Add+</span>
       </a>
     </ModalTrigger>
   </div>

处理PopUpClose：

 handlePopupClose: function(popUpName){
   var that = this;
   if (popUpName == 'category') {
     this.setState({"isDataChangeKey ": this.state.isDataChangeKey +1});
     console.log("Modal Closed");
   }

在选择组件中：

componentWillUpdate: function(nextProps, nextState) {
  if (nextProps.dataStateKey != this.props.dataStateKey) {
    this.getAjaxData();
  }
},

当Modal Popup onClose刷新项目时的ReactJS

0 个答案: