react-admin ですこし複雑なデータをPOSTしたい場合

Nov 22, 2021 17:03 · 209 words · 1 minute read

たとえば、こんな感じのネストした要素があるJSONをPOSTしたい場合。

{
    "id": 123,
    "name": {
        "first": "yoshida",
        "last": "shigeru"
    }
}

こんな感じで、ドット区切りでsourceを定義すればよい。

<SimpleForm>
    <TextInput source="id"/>
    <TextInput source="name.first"/>
    <TextInput source="name.last"/>
</SimpleForm>

もっと複雑なデータ構造をPOSTしたい場合

transform 属性を使う。

FormData を引数とする関数を定義できて、これがPOST直前に呼ばれるようにできる。 この関数はPromiseを返すこともできるとのこと。

export const UserCreate = (props) => {
    const transform = data => ({
        ...data,
        fullName: `${data.firstName} ${data.lastName}`
    });
    return (
        <Create {...props} transform={transform}>
            ...
        </Create>
    );
}
tweet Share