我需要打开一个搜索工具并在其中选择一个值,然后将其取回。
当我单击按钮时,打开搜索帮助,我将选择的数据放入存储中,但是回来后如何使用?
我需要将从搜索帮助中选择的数据直接写到正面的输入中。
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');
}
最佳答案
为了使您可以在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)
减速器的示例如下所示:
function reducerName(state = {}, action) {
switch(action.type) {
case ACTION_TYPE:
return { stateProp1: action.data // };
...
default:
return state;
}
}