Question

我有一个为表单生成字段的函数，如下所示：

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）获取一个对象。理想情况下，我希望单击事件触发add方法并添加新创建的字段。

Answer 1

this.form既不是React状态也不是MobX可观察到的，因此更改其值时什么也不会发生。

要使其正常工作，您应该创建一个observable初始化的form makeFields字段，并使用一个action函数来更改其值，然后使用observer重新渲染。

如果您对上述内容不太熟悉，请先阅读React＆MobX官方教程。

Mobx根据条件在单击时响应表单添加字段

1 个答案: