【问题标题】:dynamic label width textfield outlined material ui react动态标签宽度文本字段概述材料ui反应
【发布时间】:2019-12-18 21:27:36
【问题描述】:

我有一个文本字段变体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"
/>

【问题讨论】:

标签: reactjs material-ui


【解决方案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} />

【讨论】:

  • 我看不出有什么可以改变的,你能在jsfiddlesandbox上举个例子吗?
  • MyTextField 将使用静态标签而不是动态标签创建。材质组件将为它计算宽度。
猜你喜欢
  • 1970-01-01
  • 2021-02-10
  • 2019-06-01
  • 2021-06-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-06-23
  • 2020-11-28
相关资源
最近更新 更多