如何解决React mobx 找不到注入的商店
我给checkBox绑定了一个click事件,它会调用store中的action函数。但是,当我单击复选框时,似乎没有注入商店。
我将点击事件绑定在复选框上。 CheckBox.tsx
:
import * as React from 'react';
import { CheckBox,Stack } from '@fluentui/react';
import { inject,observer } from 'mobx-react';
import { PageStore } from '../Store/PageStore';
interface CheckBoxSexProps {
pageStore?: PageStore
}
@inject("pageStore") @observer
export class CheckBoxSex extends React.Component<CheckBoxSexProps,{}> {
// Used to add spacing between checkBoxes
private stackTokens = { childrenGap: 10 };
private changeType: string = "female";
public render() {
console.log("CheckBoxSex render");
console.log(this.props.pageStore);
return (
this.props.pageStore?.loadingStatus ?
<Stack tokens={this.stackTokens}>
<CheckBox label="female" defaultChecked onChange={this.onChange("female")} />
<CheckBox label="male" defaultChecked onChange={this.onChange("male")} />
</Stack>
: null
);
}
private onChange = (sexType: string) => {
this.changeType = sexType;
return this._onChange;
}
private _onChange(ev?: React.FormEvent<HTMLElement | HTMLInputElement>,isChecked?: boolean) {
this.props.pageStore?.changeFilter(this.changeType,isChecked);
}
}
并且商店已经导出。 PageStore.ts
import { action,computed,makeObservable,observable } from 'mobx';
export class PageStore {
@observable public filter: Set<String> = new Set(["female","male"]);
constructor() {
makeObservable(this);
}
@action
public changeFilter(sex: string,actionType: boolean | undefined) {
if (actionType) {
this.filter.add(sex);
} else {
this.filter.delete(sex);
}
console.log(actionType)
}
}
我在 Canvas.tsx
提供商店
import * as React from 'react';
import {Provider,observer} from 'mobx-react'
import { CheckBoxSex } from './CheckBox_Class';
import { DetailsInfo } from './DetailsInfo_Class';
import { PageStore } from '../Store/PageStore';
@observer
export class Canvas extends React.Component {
private pageStore: PageStore;
constructor(props: any) {
super(props);
this.pageStore = new PageStore();
}
public render() {
console.log("Canvas render");
return (
this.pageStore?.loadingStatus === true ?
<Provider pageStore={this.pageStore}>
<div className="ms-Grid" dir="ltr">
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm6 ms-md4 ms-lg3">
<DetailsInfo />
</div>
<div className="ms-Grid-col ms-sm6 ms-md8 ms-lg9">
<CheckBoxSex />
</div>
</div>
</div>
</Provider>
: null
);
}
}
问题是页面可以被渲染,但是一旦我点击了复选框,它就会引发一个错误:
TypeError: undefined 不是一个对象(评估 'this.props.pageStore') _onChange
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。