代码之家 › 专栏 › 技术社区 › Aldo

使用控制器组件,在文本字段中显示标签需要什么?

react-admin reactjs

Aldo · 技术社区 · 5 年前

使用React Admin,我使用ShowController组件,这使我可以更自由地自定义ShowView。但是,我想继续看到文本字段中的标签,但是它们已经不见了。

这段代码显示了我是如何使用ShowController的,它部分地工作:只显示记录值,而不显示标签(我也尝试了不使用prop“label”,它也不工作)。

const OrderShow = props => {
    return (<ShowController {...props}>
        {controllerProps => {
            return (
                <Grid container spacing={8}>
                     <Grid item xs={3}>
                         <TextField label="ID" source="id" {...controllerProps} />
                         ...

在ShowView标准组件中显示标签时缺少什么?

1 回复 | 直到 5 年前

selens 5 年前

文本字段的标签通常由其 source 财产。如果你想用 <ShowController> 具有自定义布局的组件,我建议您创建另一个自定义组件并在 <Show> , <ShowView> 或 <SimpleShowLayout> .

我用 SimpleForm 组件可以显示其标签,并使用自定义隐藏工具栏 CardActions .

例子:

const FormToolbar = () => (
 <CardActions style={{display: 'none'}}>
 </CardActions>
);

const FormDiv = ({controllerProps, ...props}) => (
 <Grid container spacing={24}>
   <Grid item xs={12}>
     <SimpleForm toolbar={<FormToolbar/>}>
      <TextField {...props} record={controllerProps.record} source="name"/>
     </SimpleForm>
 </Grid>
</Grid>
);

const OrderShow = props => (
 <ShowController {...props} title="Order">
    {controllerProps =>
        <Show actions={<ShowActions pageType="show" />} {...props} {...controllerProps}>
            <SimpleShowLayout>
                <FormDiv controllerProps={controllerProps} />
            </SimpleShowLayout>
        </Show>
    }
</ShowController>
);

export default OrderShow;

推荐文章