添加后缀跟随用户输入材料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

我认为装饰不是解决这个问题的最佳方法。相反，您应该查看文档中的 Integration with 3rd party input libraries 示例。

这里是使用“react-number-format”包添加 % 后缀的演示的 TypeScript 代码的修改版本：

import * as React from "react";
import NumberFormat from "react-number-format";
import TextField from "@mui/material/TextField";

interface CustomProps {
  onChange: (event: { target: { name: string; value: string } }) => void;
  name: string;
}

const NumberFormatCustom = React.forwardRef<NumberFormat, CustomProps>(
  function NumberFormatCustom(props, ref) {
    const { onChange, ...other } = props;

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

interface State {
  numberformat: string;
}

export default function FormattedInputs() {
  const [values, setValues] = React.useState<State>({
    numberformat: "90"
  });

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValues({
      ...values,
      [event.target.name]: event.target.value
    });
  };

  return (
    <TextField
      sx={{ maxWidth: 120 }}
      label="Percentage"
      value={values.numberformat}
      onChange={handleChange}
      name="numberformat"
      id="formatted-numberformat-input"
      InputProps={{
        inputComponent: NumberFormatCustom as any
      }}
      variant="standard"
    />
  );
}