Как создать текстовое поле с кнопкой справа? - PullRequest
Новая
       8

Как создать текстовое поле с кнопкой справа?

0 голосов
/ 24 сентября 2019

Я хочу создать форму с некоторыми текстовыми полями только для чтения с кнопкой копирования справа.Текстовое поле должно занимать все доступное горизонтальное пространство, кроме пространства кнопки.Как правильно расположить их с помощью компонентов библиотеки 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>

В этом решении есть две проблемы:

*Кнопка 1007 * выглядит некрасиво.Я внес коррективы в 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

Текущийсмотреть:

enter image description here

1 Ответ

1 голос
/ 24 сентября 2019

Используйте InputProps и предоставьте endAdornment .простой пример: 

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

Edit Invisible Backdrop

...