4

嗨，我使用反应引导模式。在我的页面上，我有一个<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>

处理弹出关闭：

 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();
  }
},
4

0 回答 0