ReferenceInput中的自引用,react-admin

时间:2018-06-06 13:03:43

标签: reactjs react-admin

我正在使用react-admin。 认为我有一个json模型如下, 但“complextypes”再次引用数据类型。我的意思是有一个自我参考。

"datatypes": [
     {
        "id": "On off state",
        "type": "enum",
        "values": [
            {
                "id": "On"
            },
            {
                "id": "Off"
            }
        ],
        "default": "Off"
    },

    {
        "id": "Complex",
        "type": "complex",
        "complextypes": [
            {
                "id": "On off state"
            },
            {
                "id": "Communication type"
            }
        ]
    }
]

在创建页面中,该模型没有错误。但是当我进入编辑页面时,我无法添加新的复杂类型。当我按下+添加按钮时,它会在屏幕上显示后立即消失。

我不知道为什么,但我猜有两个渲染。我也在撒谎。有没有人,为什么会这样?

import React, { Component } from 'react';
import {
	Edit, SimpleForm, TextInput, ArrayInput, SimpleFormIterator, SelectInput, NumberInput, ReferenceInput, required, regex
} from 'react-admin';
import { isDataTypeValid } from '../../utility';

class DataTypeEdit extends Component {
	state = {
		listEditorVisible: undefined,
		complexEditorVisible: undefined
	}

	constructor(props) {
		super(props);
		this.isValid = this.isValid.bind(this);
	}

	isValid(values) {
		let errors = {};

		this.setState({
			listEditorVisible: values["type"] === "enum",
			decimalEditorVisible: values["type"] === "decimal",
			complexEditorVisible: values["type"] === "complex"
		});

		errors = isDataTypeValid(values);

		return errors;
	}

	validateParameterName = [
		required(),
		regex(/^[A-Za-z_]+[A-Za-z_0-9\s]*$/, 'Name must start with [A-Z], [a-z] or (_) characters')
	];

	render() {
		return (
			<Edit title="Data Type - EDIT" {...this.props} undoable={false}>
				<SimpleForm redirect="list" validate={this.isValid}>
					<TextInput source="id" label="Name" />
					<SelectInput
						source='type'
						choices={[
							{ name: 'String', id: 'string' },
							{ name: 'Enum', id: 'enum' },
							{ name: 'Decimal', id: 'decimal' },
							{ name: 'Complex', id: 'complex' }
						]}
					/>
					<ArrayInput source="values">
						<SimpleFormIterator>
							<TextInput source="id" label="Name" validate={this.validateParameterName} />
						</SimpleFormIterator>
					</ArrayInput>
					<NumberInput source="min" /><br />
					<NumberInput source="max" /><br />
					<NumberInput source="res" /><br />
					<TextInput source="unit" />
					<ArrayInput source="complextypes">
						<SimpleFormIterator>
							<ReferenceInput label="Data Type" source="id" reference="datatypes" validate={required()}>
								<SelectInput optionText="id" />
							</ReferenceInput>
						</SimpleFormIterator>
					</ArrayInput>
				</SimpleForm>
			</Edit>
		)
	};
}

export default DataTypeEdit;

0 个答案:

没有答案