如何在 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>
    ),
  }}
/>

现场演示