reactjs - 具有预加载值的 React Material-UI TextField 不会移动标签(标签与 TextField 内容重叠)

标签 reactjs material-ui

我有 Material-UI TextField:

<TextField id="gen_ref_num" className="col-6 form-control-sm" label="Number" variant="filled" value={this.props.invoice.gen_ref_num} onChange={this.handleChange}/>

并且 this.props.invoice.gen_ref_num 已预加载该值。不幸的是,标签与内容重叠。当我开始编辑字段时,标签向上移动并位于正确的位置(不再重叠)。如何要求 Material-UI TextField 尊重预加载的值并将标签向上移动?

最佳答案

下面的代码就是答案:

InputLabelProps={{ shrink: !!this.state.value }}

当适应问题中的代码时,代码ir:

InputLabelProps={{ shrink: !!this.props.invoice.gen_ref_num }} 

有关此内容的更多内容,请访问 https://github.com/mui-org/material-ui/issues/13013

关于reactjs - 具有预加载值的 React Material-UI TextField 不会移动标签(标签与 TextField 内容重叠),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67784970/

相关文章:

javascript - React 类组件 - 基于 props 的条件样式

reactjs - 访问 createMuiTheme 中以前的主题变量

reactjs - 以 redux 形式在 onChange 上显示错误消息

javascript - 使用 React 和 Material UI 禁用自动填充表单

reactjs - 如何动态设置高度为动画值后动画的组件的高度?

reactjs - 如何在提交表单时重置下拉值,其他输入值在 React Hooks 中被清除

javascript - react : Stop page reload on clicking on anchor tag for scrolling

html - 在 react 中如何自动打开另一个页面?

reactjs - Eslint 错误 : Missing parentheses around multilines JSX react/jsx-wrap-multilines

javascript - 如何使用 CSS 模块在 React 中设置子组件的样式