如何有条件地在react-admin中设置字段标签的格式？

Question

我的“编辑”视图中有以下代码部分：

         <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" />

我该怎么办呢？

Answer 1

您需要使用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>