代码之家 › 专栏 › 技术社区 › Aessandro

Mobx react form根据条件单击添加字段

mobx-react-form mobx-react mobx javascript

0

Aessandro · 技术社区 · 8 年前

我有一个函数,它为如下形式生成字段:

export const makeFields: Function = (itemData: Object) => {
    return [
        {
        // PROJECT DETAIL SECTION
            name: 'chooseAccount',
            label: 'Choose Account',
            fields: [{
                name: 'account',
                label: 'Choose Trading Account',
                rules: 'required',
                ...(itemData ? { value: itemData.trading_account ? itemData.trading_account.name : null } : null)
            }]
        },
        {
            name: 'projectDetails',
            label: 'Project detail',
            fields: [
                {
                    name: 'projectCode',
                    label: 'Project code',
                    rules: 'required',
                    ...(itemData ? { value: itemData.code } : null)
                },
...

以及将此函数用于表单字段的组件:

...
export default class ProjectForm extends React.Component<*> {

    props: TypeProps;

    getMode = () => this.props.mode

    componentDidMount() {
        const projectDetailsStore: Object = this.props.projectDetailsStore;

        this.getMode() === 'edit'
            ?
            projectDetailsStore.loadProjectDetails(this.props.projectId)
            :
            projectDetailsStore.resetStore();
    }

    @computed get form(): Object {
        const itemData: Object = (typeof this.props.itemData === 'undefined') ? {} : this.props.itemData;
        const fields: Array<*> = makeFields(this.props.projectDetailsStore.details);

        return this.getMode() === 'edit'
            ? projectEdit(fields, itemData)
            : projectCreate(fields);
    }

    render(): React.Element<*> {
        const t: Function = this.props.t;
        const TAmodel: AutoCompleteData = new AutoCompleteData(autoCompleteTradingAccounts);
        const Pmodel: AutoCompleteData = new AutoCompleteData(autoCompleteProject);
        const projectDetailsStore: Object = this.props.projectDetailsStore;

        this.form.add(
            {
                name: 'test'
            }
    )

        console.log(this.form)
        return (
            <PageWrapper>
                {projectDetailsStore.loadingProjectDetails
                    ?
                        <Loader />
                    :
                        <FormWrapper form={this.form}>
                            <form>
                                <FormSection form={this.form} section="chooseAccount">
                                    <InputLabel htmlFor="account">
                                        {t('projectForm: Choose trading account')}
                                    </InputLabel>
                                    <ElectroTextField field={this.form.$('chooseAccount.account')} />
                                    {/* <ElectroAutoComplete
                                        field={this.form.$('chooseAccount.account')}
                                        form={this.form}
                                        props={{
                                            model: TAmodel
                                        }}
                                    /> */}
                                </FormSection>
                                <FormSection form={this.form} section="projectDetails">
                                    <ElectroTextField field={this.form.$('projectDetails.projectCode')} />
                                    <ElectroTextField field={this.form.$('projectDetails.projectName')} />
...

    this.form.add(
        {
            name: 'test'
        }
    )

它不会抛出错误,但什么也不会发生。

add方法根据文档获取一个对象( https://foxhound87.github.io/mobx-react-form/docs/api-reference/fields-methods.html

1 回复 | 直到 8 年前

1

0

Renwei Liu 8 年前

this.form 既不是React状态也不是MobX可观察状态,因此当您更改其值时不会发生任何事情。

为了让它工作,你应该创建一个 observable form 由初始化的字段 makeFields ,并使用 action 函数更改其值,然后使用 observer 重新渲染。

如果您不太熟悉上述内容,请阅读React&MobX官方教程第一。