Как я могу условно отформатировать метку для поля в 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>

Я должен пометить поля данных на основе типа, который я выбрал выше.

So:

если я выберу "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" />

как я могу просто сделать это?


react-native reactjs javascript jsx react-admin
person Reka Karolyi    schedule 06.04.2019    source источник
comment
Какие-либо предложения?   -  person Reka Karolyi    schedule 08.04.2019

Ответы (1)


arrow_upward
2
arrow_downward

вам нужно использовать компонент 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>

person MaxAlex    schedule 08.04.2019
comment
Спасибо Макс! Это работало. Если я хочу сделать это видимым только в том случае, если определен formData.type, где я должен поместить селектор? к возврату? или перед константой? - person Reka Karolyi; 09.04.2019
comment
Лучше перед const, просто явно проверить на undefined: if (formData.type !== undefined) {...} - person MaxAlex; 09.04.2019