如何使用右侧的按钮创建文本字段？

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

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

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

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

现场演示