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

現場演示