动态标签宽度文本框概述材料ui反应 [英] dynamic label width textfield outlined material ui react

问题描述

我有一个文本字段变体 outlined ，并且我有一个动态标签，问题是当它更改宽度时，第一行的宽度与第一次相同.

I have a textfield variant outlined, and there I have a dynamic label, the problem is that when it changes the top line in width remains the same as the first time

<TextField
    id="debtorIin"
    name="debtorIin"
    label={debtorType === "pvt" ? "Ф.И.О.:" : "Наименование организации:"}
    disabled={debtorFullInfo && true}
    className={classes.textField}
    value={debtorIin}
    helperText={touched.debtorIin ? errors.debtorIin : ""}
    error={touched.debtorIin && Boolean(errors.debtorIin)}
    onChange={change.bind(null, "debtorIin")}
    margin="normal"
    variant="outlined"
/>

推荐答案

我认为这是因为它不会重新计算属性更改的宽度，您可以通过为其创建两个不同的TextField来解决此问题.

I think it happens because it won't recalculate the width on property change, you can solve that by creating two different TextField for it.

首先，您需要一个包含所有常见道具的东西.

First, you need one that contains all the common props.

const MyTexField = ({ label, ...props }) => (
<TextField
    id="debtorIin"
    name="debtorIin"
    label={props.label}
    disabled={props.debtorFullInfo && true}
    className={props.classes.textField}
    value={props.debtorIin}
    helperText={props.touched.debtorIin ? props.errors.debtorIin : ""}
    error={props.touched.debtorIin && Boolean(props.errors.debtorIin)}
    onChange={change.bind(null, "debtorIin")}
    margin="normal"
    variant="outlined"
/>
);  

然后，您可以使用该组件:

Then, you can use that component:

<MyTextField label="Ф.И.О.:" {...props} />

这篇关于动态标签宽度文本框概述材料ui反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！