0

我有一个为这样的表单生成字段的函数：

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 方法并添加新创建的字段。

4

1 回答 1

0

this.form既不是 React 状态也不是 MobX 可观察的，所以当你改变它的值时不会发生任何事情。

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

如果你对上面提到的不是很熟悉，请先阅读 React & MobX 官方教程。

于 2018-07-31T08:55:28.843 回答