我正在使用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;