reactjs - 如何在 TextField 的右侧添加一个 Button?
问题描述
我想构建一个带有一些只读文本字段的表单,右侧有一个复制按钮。文本字段应占据除按钮空间之外的所有可用水平空间。如何使用 material-ui.com 库组件正确布局它们?
我现在使用的渲染代码:
import {CopyToClipboard} from 'react-copy-to-clipboard'
<Grid container className={classes.content}>
<Grid item xs={12} className={classes.row}>
<ButtonGroup fullWidth className={classes.buttonGroup}>
<TextField
id="epg-value"
label="Value"
value={null !== value ? value : ""}
className={classes.textField}
margin="dense"
variant="standard"
InputProps={{
readOnly: true,
}}
/>
<CopyToClipboard text={null !== value ? value : ""}
onCopy={() => {alert("copied")}}>
<IconButton
aria-label="Copy to clipboard"
title="Copy to clipboard"
classes={{
root: classes.button
}}
color="primary"
edge="end"
>
<FileCopy/>
</IconButton>
</CopyToClipboard>
</ButtonGroup>
</Grid>
</Grid>
这个解决方案有两个问题:
按钮看起来很难看。我已经进行了 css 调整,但默认情况下它看起来真的很难看。
它会在浏览器控制台中产生警告,如下所示:
Warning: React does not recognize the `disableFocusRipple` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disablefocusripple` instead. If you accidentally passed it from a parent component, remove it from the DOM element. in div (created by ForwardRef(FormControl)) in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl))) in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField)) in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField))) in WithStyles(ForwardRef(TextField)) (created by AdvancedPanel) in div (created by ForwardRef(ButtonGroup)) in ForwardRef(ButtonGroup) (created by WithStyles(ForwardRef(ButtonGroup))) in WithStyles(ForwardRef(ButtonGroup)) (created by AdvancedPanel) in div (created by ForwardRef(Grid)) in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid))) in WithStyles(ForwardRef(Grid)) (created by AdvancedPanel) in div (created by ForwardRef(Grid)) in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid))) in WithStyles(ForwardRef(Grid)) (created by AdvancedPanel) in div (created by ForwardRef(ExpansionPanelDetails)) in ForwardRef(ExpansionPanelDetails) (created by WithStyles(ForwardRef(ExpansionPanelDetails))) in WithStyles(ForwardRef(ExpansionPanelDetails)) (created by AdvancedPanel) in div (created by ForwardRef(ExpansionPanel)) in div (created by Transition) in div (created by Transition) in div (created by Transition) in Transition (created by ForwardRef(Collapse)) in ForwardRef(Collapse) (created by WithStyles(ForwardRef(Collapse))) in WithStyles(ForwardRef(Collapse)) (created by ForwardRef(ExpansionPanel)) in div (created by ForwardRef(Paper)) in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper))) in WithStyles(ForwardRef(Paper)) (created by ForwardRef(ExpansionPanel)) in ForwardRef(ExpansionPanel) (created by WithStyles(ForwardRef(ExpansionPanel))) in WithStyles(ForwardRef(ExpansionPanel)) (created by AdvancedPanel) in AdvancedPanel (created by GatewayWidget) in div (created by ForwardRef(Grid)) in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid))) in WithStyles(ForwardRef(Grid)) (created by GatewayWidget) in div (created by ForwardRef(Grid)) in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid))) in WithStyles(ForwardRef(Grid)) (created by GatewayWidget) in div (created by GatewayWidget) in section (created by GatewayWidget) in ThemeProvider (created by GatewayWidget) in GatewayWidget
目前的样子:
解决方案
推荐阅读
- c# - 单击 datagridview 单元格时,如何在另一个表单上修改日期时间选择器?
- model - 我可以使用 Barra 因子(动量、大小、非线性大小......)来运行时间序列回归吗?
- c++ - 如何保存具有透明度的 QImage?
- java - java.lang.IllegalArgumentException:未能找到包含 /data/data/**/cache/storage/CAPTURE-20210427_125521.jpg 的已配置根
- ios - UIPickerView 调用 didSelectRow: 动画时出现错误的行
- android - Retrofit 在使用 LiveData 时提供 onFailure 回调 - 无法在没有参数的情况下调用 public androidx.lifecycle.LiveData()
- azure - 我如何从 azure 活动目录中检索所有企业应用程序
- wordpress - 在wordpress中完成订单后保留编码链接
- python - 安装bluepy失败
- django - dajngo 泛型类中的 select_related 属性是什么,有人可以解释这意味着什么吗?