![](/img/trans.png)
[英]How to format the text of the choices in a ReferenceInput field in react-admin?
[英]How can I conditionally format the label for a field in react-admin?
我的“編輯”視圖中有以下代碼部分:
<FormTab label="Jellemzok">
<SelectInput label="Tipus" source="type" choices={[
{id: 0, name: "type1"},
{id: 1, name: "type2"},
{id: 2, name: "type3"},
{id: 3, name: "type4"},
{id: 4, name: "type5"},
{id: 5, name: "type6"},
{id: 6, name: "type7"},
{id: 7, name: "type8"},
]} optionText="name" />
<TextInput source="data_1" />
<TextInput source="data_2" />
<TextInput source="data_3" />
<TextInput source="data_4" />
<TextInput source="data_5" />
<TextInput source="data_6" />
</FormTab>
我必須根據上面選擇的類型來標記數據字段。
所以:
如果選擇“ type1”,則標簽應為:
<TextInput label="label1" source="data_1" />
<TextInput label="label2" source="data_2" />
<TextInput label="label3" source="data_3" />
<TextInput label="label4" source="data_4" />
<TextInput label="label5" source="data_5" />
<TextInput label="label6" source="data_6" />
但是,如果我選擇“ type6”,則標簽應如下所示:
<TextInput label="this_is_another_label1" source="data_1" />
<TextInput label="this_is_another_label2" source="data_2" />
<TextInput label="this_is_another_label3" source="data_3" />
<TextInput label="this_is_another_label4" source="data_4" />
<TextInput label="this_is_another_label5" source="data_5" />
<TextInput label="this_is_another_label6" source="data_6" />
我該怎么辦呢?
您需要使用FormDataConsumer組件:
<FormDataConsumer> {({ formData }) => { const label = formData.type === 0 ? "label" : "this_is_another_label" return ( <> <TextInput label={label + 1} source="data_1" /> <TextInput label={label + 2} source="data_2" /> <TextInput label={label + 3} source="data_3" /> <TextInput label={label + 4} source="data_4" /> <TextInput label={label + 5} source="data_5" /> <TextInput label={label + 6} source="data_6" /> </> ) }} </FormDataConsumer>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.