我有一个文本字段变体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"
/>
(source: imggmi.com https://cdn1.imggmi.com/uploads/2019/8/12/68fda6555246af40381961d597a825dc-full.jpg)
(source: imggmi.com https://cdn1.imggmi.com/uploads/2019/8/12/0f3b45f55539385706a52a245ea54fdd-full.jpg)
我认为发生这种情况是因为它不会重新计算属性更改的宽度,您可以通过为其创建两个不同的 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} />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)