Добавить суффикс, следующий за пользовательским материалом ввода ui TextField

Question

Я хочу создать элемент TextField, который имеет значение, когда пользователь вводит текст, а затем вводное украшение.

Можно ли добавить знак% после значения вместо конца ввода?

Текущий процентЗнак (%) находится в начале ввода перед вводом пользователем и будет идти до конца ввода, если есть значение.

<TextField
{...defaultProps}
InputProps={{
    startAdornment: this.state.percentage ? (
        <span />
    ) : (
        <InputAdornment position='start'>%</InputAdornment>
    ),
    endAdornment: this.state.percentage ? (
        <InputAdornment position='end'>%</InputAdornment>
    ) : (
        <span />
    ),
    classes: defaultInputClasses
}}
error={this.state.percentageError ? true : false}
fullWidth
helperText={this.state.percentageError ? 'percentage must be between 1-100' : ''}
id='percentage'
label='percentage'
margin='normal'
name='percentage'
onChange={this.handleChange}
value={this.state.percentage}

/>

Исходное состояние

Текущее состояние, когда пользователь вводит

Ожидается

Answer 1

Я думаю, что украшения не лучший подход к этой проблеме.Вместо этого вы должны взглянуть на пример отформатированные входные данные в документации.

Вот модифицированная версия демо-версии, использующая пакет реагирующий-числовой формат для добавления суффикса%:

import React from "react";
import NumberFormat from "react-number-format";
import PropTypes from "prop-types";
import TextField from "@material-ui/core/TextField";

function NumberFormatCustom(props) {
  const { inputRef, onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={values => {
        onChange({
          target: {
            value: values.value
          }
        });
      }}
      thousandSeparator
      suffix="%"
    />
  );
}

NumberFormatCustom.propTypes = {
  inputRef: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired
};

class FormattedInputs extends React.Component {
  state = {
    numberformat: "90"
  };

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value
    });
  };

  render() {
    const { numberformat } = this.state;

    return (
      <TextField
        label="react-number-format"
        value={numberformat}
        onChange={this.handleChange("numberformat")}
        id="formatted-numberformat-input"
        InputProps={{
          inputComponent: NumberFormatCustom
        }}
      />
    );
  }
}

export default FormattedInputs;