如何解决React-Admin TextField和TextInput不显示标签和CSS
在react-admin中,当我将子组件移动到另一个组件并尝试在simpleform标记内呈现它时,文本字段未显示其值,并且textinput标记CSS也丢失了。我想做的是为create和edit标签创建一个公共组件,因此我将其分解为多个组件,然后尝试使用props.children
进行渲染。export const AssessmentEdit = props => {
return (
<CommonComponents {...props} componentType='edit' notif='Assessment Preference Updated successfully' redirect='list' validation={validateAssessment}>
<FormData {...props} componentType='edit'/>
</CommonComponents>
)
};
const CommonComponent = (props) => {
const notify = useNotify();
const redirect = useRedirect();
const onSuccess = () => {
notify(props.notif);
redirect(props.redirect,props.basePath);
};
const Compo = components[props.componentType];
console.log(props.componentType)
return (
<Compo {...props}
undoable={false}
onSuccess={onSuccess}>
{props.componentType === 'show' ? <SimpleShowLayout>
{props.children}
</SimpleShowLayout> : <SimpleForm
redirect={props.redirect}
validate={props.validation}>
{props.children}
</SimpleForm>}
</Compo>
);
};
export const FormData = (props) => {
const classes = utilStyles();
return (
<React.Fragment>
{props.componentType === 'edit' && <>
<TextField {...props} source="id" label="Id"/>
<TextField {...props} source="organization_id" label="Organization"/>
<TextField {...props} source="provider" label="Provider"/>
</>}
<TextInput source="name" label={'Name *'}/>
<SelectInput source="category"
label={'Category *'}
choices={AssessmentCategory}
optionText="name"
optionValue="value"/>
<ArrayInput source="topics">
<SimpleFormIterator>
<TextInput/>
</SimpleFormIterator>
</ArrayInput>
<TextInput source="description"
label={'Description *'}
className={classes.fullWidth}
options={{multiLine: true}}/>
<RichTextInput source="instructions"
label={'Instructions *'}/>
<NumberInput source="duration"
label={'Duration *'}/>
<BooleanInput source="randomize_questions"/>
<FormDataConsumer>
{({formData,formData: {randomize_questions}}) => {
if (randomize_questions) {
return <NumberInput source="question_count" label={'Question Count *'}/>
}
return null;
}}
</FormDataConsumer>
<ArrayInput source="questions"
label={'Questions *'}>
<SimpleFormIterator>
<ReferenceInput source="questionId"
className={classes.fullWidth}
label={"Question"}
reference="search-questions">
<AutocompleteInput optionValue="id"
matchSuggestion={() => true}
inputText={(value) => {
return value && value.question_text && value.question_text.slice(0,200)
}}
className={classes.fullWidth}
optionText={<Custom/>}/>
</ReferenceInput>
<NumberInput label="Question Weight" source="question_weight"/>
</SimpleFormIterator>
</ArrayInput>
<ArrayInput source="skills" label={'Skills *'}>
<SimpleFormIterator>
<ReferenceInput source="skillId"
label={"Skill"}
className={classes.fullWidth}
reference="perform-skill-search">
<AutocompleteInput optionValue="id"
className={classes.fullWidth}
optionText="display_name"/>
</ReferenceInput>
<SelectInput label="Skill Level"
choices={levels}
optionText="key"
optionValue="value"
source="skill_level"/>
</SimpleFormIterator>
</ArrayInput>
</React.Fragment>
);
};
解决方法
我最终创建了自己的 TextField 组件并明确地传递了道具:
interface CustomTextFieldProps {
label?: string,record?: Record,source: string
}
const CustomTextField = (props: CustomTextFieldProps) => (
<Labeled label={props.label ? props.label : startCase(props.source)}>
<span>{get(props.record,props.source)}</span>
</Labeled>
);
用法:
<CustomTextField source="fieldName" record={props.record} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。