Question

我需要打开一个搜索工具并在其中选择一个值，然后将其取回。

当我单击按钮时，我打开搜索帮助，将选择的数据放入存储中，但是回来后如何使用？我需要将从搜索帮助中选择的数据直接写到正面的输入中。

   async showPopup(){
      const LazyLoadingComponent=await import('../../CP/SearchHelp/searchHelp');
      this.setState({lazyLoadComponent:React.createElement(LazyLoadingComponent.default)});
      await ShowPopup('http://localhost:3070/api/WorkCenter/GetWorkCenters');
      console.log(this.state.selectedRow);
      if(this.state.selectedRow!==''){
        this.setState({WorkCenterCode:this.state.selectedRow.WorkCenterCode});
      }
    }

在某种程度上，我必须等到页面被导入。在 showpopup 中，我实际上显示了需要通过更新搜索帮助中的redux来更新的数据。

export async function ShowPopup(apiUrl){
    var apiData=await APIGetWorkCenters(apiUrl);
    SearchHelApiData(await JSON.parse(apiData.data));
    SearchHelPopupOpen(true);
}


export const SearchHelPopupOpen=(popupOpen)=>{
    store.dispatch({
        type:'SearchHelp_popupOpen',
        popupOpen:popupOpen
    });
}

export const SearchHelApiData=(apiData)=>{
    store.dispatch({
        type:'SearchHelp_apiData',
        apiData:apiData
    });
}

在这里，我需要使我的searchhelp组件异步和该组件直到关闭。我在下面共享了searchhelp组件的代码。

class SearchHelp extends BasePage {

  constructor(props){
    super(props);
    this.connect(['SearchHelp']);
    this.onSelectionChanged = this.onSelectionChanged.bind(this);
  }

  componentDidMount(){
    SearchHelSelectedRow('');
  }


    toggle = () => {
      SearchHelApiData('');
      SearchHelPopupOpen(false);
    }

    onSelectionChanged({ selectedRowsData }) {
      const data = selectedRowsData[0];
      SearchHelSelectedRow(data);
      SearchHelApiData('');
      SearchHelPopupOpen(false);
    }

    render() {
      return (
        <MDBContainer>
          <MDBModal  size="md" isOpen={this.state.popupOpen} toggle={this.toggle} centered backdrop={false}>
            <MDBModalHeader className="" toggle={this.toggle}></MDBModalHeader>
            <MDBModalBody>
            <DataGrid
                dataSource={this.state.apiData}
                selection={{ mode: 'single' }}
                showBorders={true}
                hoverStateEnabled={true}
                keyExpr={'WorkCenterId'}
                onSelectionChanged={this.onSelectionChanged} >
              </DataGrid>
            </MDBModalBody>
          </MDBModal>
        </MDBContainer>
        );
    }
}

我在等待您的帮助。

----------编辑-------------

我用 componentDidUpdate（）方法解决了我的问题。

  componentDidUpdate(){
      if(this.state.selectedRow!=='' && this.state.selectedRow!==undefined){
        SearchHelSelectedRow('');
        if(this.state.selectedRow.WorkCenterId!==undefined){
        this.setState({WorkCenterCode:this.state.selectedRow.WorkCenterCode});}
        if(this.state.selectedRow.ReasonCode!==undefined){
          this.setState({ReasonCode:this.state.selectedRow.ReasonCode});}
      }
    }

    async showPopupWorkCenter(){
      await ShowPopup('http://localhost:3070/api/WorkCenter/GetWorkCenters');
    }

    async showPopupReasons(){
      await ShowPopup('http://localhost:3070/api/Reason/GetReasons');
    }

Answer 1

为了使您可以在SearchHelp组件中使用Redux并获得对Redux商店的访问权限，需要将组件连接到我看不到的商店中。

从根本上讲，您需要三件事来使事情正常工作：reduce，actionCreator和用于保存状态更改的商店。如果有这些，则必须使用connect高阶函数将组件连接到商店，该函数接受两个参数并包装组件，从而可以访问存储在商店中的数据。

作为示例，给定组件SearchHelp，您可以通过执行以下操作连接到商店：

import { connect } from 'redux'

class SearchHelp extends BasePage { ... }

function mapStateToProps(state) {
   // this function has access to your redux store, so you can access the properties there
   // it should return an object
   return {
      stateProp1: state.stateProp1,
      stateProp2: state.stateProp2,
      ...
   }
}

function mapDispatchToProps() {
   // this function is not required as you could simply pass in your actions directly
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchHelp)

reduce的示例如下所示：

function reducerName(state = {}, action) {
   switch(action.type) {
      case ACTION_TYPE:
      return { stateProp1: action.data // };
      ...

      default:
      return state;
   }
}

更新reactjs函数中的redux，然后使用状态

1 个答案: