我想用一个 TabbedShowLayout 里面 编辑 但这返回了一个与缺少道具有关的错误。
这是我的代码。
export const BarberEdit = (props) => {
const [id, setId] = useState(props.id);
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [birthday, setBirthday] = useState(Date);
const [transport, setTransport] = useState("");
const [email, setEmail] = useState("");
function handleSubmit() {
console.log("alguma coisa.");
}
return (
<Edit {...props} title={<BarberEditTitle />}>
<TabbedShowLayout>
<Tab label="Perfil">
<SimpleForm submitOnEnter={false}>
<TextInput source="name" />
<TextInput source="phone" />
<DateInput source="birthday" />
<TextInput source="transport" />
<TextInput source="email" />
</SimpleForm>
</Tab>
<Tab label="Endereço">
<ReferenceManyField
label=""
reference="barbers_addresses"
target="barberId"
>
<Datagrid>
<TextField source="street" label="Rua" />
<TextField source="city" label="Cidade" />
<TextField source="district" label="Bairro" />
</Datagrid>
</ReferenceManyField>
</Tab>
</TabbedShowLayout>
</Edit>
);
};
阅读 反应管理员 文件的一点,我发现 简单表格 有两个继承的属性。
先谢谢你
对于Edit和Create布局,你应该使用TabbedForm,而不是TabbedShowLayout,同时,没有必要使用SimpleForm作为Tab子代,你可以直接将submitOnEnter传递给TabbedForm。
export const BarberEdit = (props) => {
const [id, setId] = useState(props.id);
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [birthday, setBirthday] = useState(Date);
const [transport, setTransport] = useState("");
const [email, setEmail] = useState("");
function handleSubmit() {
console.log("alguma coisa.");
}
return (
<Edit {...props} title={<BarberEditTitle />}>
<TabbedForm submitOnEnter={false}>
<FormTab label="Perfil">
<TextInput source="name" />
<TextInput source="phone" />
<DateInput source="birthday" />
<TextInput source="transport" />
<TextInput source="email" />
</FormTab>
<FormTab label="Endereço">
<ReferenceManyField
label=""
reference="barbers_addresses"
target="barberId"
>
<Datagrid>
<TextField source="street" label="Rua" />
<TextField source="city" label="Cidade" />
<TextField source="district" label="Bairro" />
</Datagrid>
</ReferenceManyField>
</FormTab>
</TabbedForm>
</Edit>
);
};