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>

此解决方案有两个问题：

按钮看起来很丑。我已经进行了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

当前外观：

Answer 1

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

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

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

1 个答案: