动态标签宽度文本字段概述的材料ui反应

Question

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

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

Answer 1

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

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

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

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

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