添加后缀follow by user input material ui TextField

IT技术 javascript reactjs material-ui
2021-05-05 21:18:27

我想创建在用户键入时具有值的 TextField 元素,然后是 Input Adornment。

是否可以在值后添加 % 符号而不是输入结束?

当前百分比符号(%)在用户键入之前的输入开始处,如果有值,将转到输入结束处。

<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}

/>

初始状态

最初的

用户键入时的当前状态

键入

预期的

预期的

1个回答

我认为装饰不是解决这个问题的最佳方法。相反,您应该查看文档中的与 3rd 方输入库集成示例。

这是使用“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"
    />
  );
}

编辑 FormattedInputs 材料演示