如何在 TextField 的右侧添加一个 Button？

Question

我想构建一个带有一些只读文本字段的表单，右侧有一个复制按钮。 文本字段应占据除按钮空间之外的所有可用水平空间。 如何使用 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>

这个解决方案有两个问题：

1. 按钮看起来很难看。 我已经进行了 css 调整，但默认情况下它看起来真的很难看。

2. 它会在浏览器控制台中产生警告，如下所示：

    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

目前的样子：

Answer 1

使用InputProps ，并为其提供endAdornment 。 简单的例子：

 <TextField
    id="standard-name"
    label="Name"
    value="hello"
    InputProps={{endAdornment: <YOUR_COPY_ICON_BUTTON />}}
  />

Answer 2

您可以在TextField的endAdornment中添加一个IconButton 。 此外，您可能还想：

• 在InputAdornment中设置position='end'以在输入文本和图标之间添加间隙。
• 在IconButton中设置edge='end'以使用负边距来抵消TextField右侧的填充。

<TextField
  {...props}
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton edge="end" color="primary">
          <SearchIcon />
        </IconButton>
      </InputAdornment>
    ),
  }}
/>

现场演示