获取作为prop传递的元素的宽度

时间:2019-06-27 18:23:15

标签: reactjs material-ui react-ref

如何获取在Material UI文本字段/输入中的InputProps中传递的开始装饰的宽度?

<TextField {...{
    InputProps: {
      startAdornment:
        <InputAdornment position="start">
          Kg
        </InputAdornment>
    },
}}/>

这是TextField的实现

<FormControl>
    {label && (
        <InputLabel disabled={disabled} htmlFor={id} {...InputLabelProps}>
            {label}
        </InputLabel>
    )}
    <Input startAdornment={StartAdornment} />
    {helperText && (
        <FormHelperText id={helperTextId} disabled={disabled} {...FormHelperTextProps}>
            {helperText}
        </FormHelperText>
    )}
</FormControl>

我在InputProps中获得了startAdornment,并试图将ref传递给它,以便在componentDidMount中获得宽度

constructor(props) {
    super(props)
    this.ref = React.createRef()
}

componentDidMount() {
    console.log('Did mount', this.ref.current.offsetWidth)
}
const StartAdornment = React.cloneElement(this.props.InputProps.startAdornment, {ref: this.ref})

我变得不确定。我确实在ref的当前属性中获取了元素,但offsetWidth是未定义的。不知道这里出了什么问题。

0 个答案:

没有答案