Как я могу замаскировать свой TextField с пользовательским интерфейсом?

У меня есть TextField для телефонных номеров в краткой форме. И тогда я хочу замаскировать это поле формы как (0) ххх ххх хх хх.

Я пытаюсь использовать плагин response-input-mask с Material-UI. Но если я хочу изменить входное значение, это не обновляет мой основной TextField.

        <TextField
          ref="phone"
          name="phone"
          type="text"
          value={this.state.phone}
          onChange={this.onChange}
        >
          <InputMask value={this.state.phone} onChange={this.onChange} mask="(0)999 999 99 99" maskChar=" " />            
        </TextField>

На самом деле, я не смог найти никакой документации для маскировки с помощью Material-UI. Я пытаюсь выяснить, как я могу использовать с другими плагинами.

Источник

7 ответов

Решение

Это должно сделать трюк:

<TextField
  ref="phone"
  name="phone"
  type="text"
  value={this.state.phone}
  onChange={this.onChange}
>
  <InputMask mask="(0)999 999 99 99" maskChar=" " />
</TextField>

демо:

Редактировать yl8p9jvq9

Источник

Для текущей версии Material-UI и response-input-mask сработал следующий ответ:

          <InputMask
            mask="(1)999 999 9999"
            value={self.state.inputValue}
            onChange={this.getTextFieldValue}
            className={this.props.classes.textField}
          >
            {() => <TextField
              id={attribute}
              label={attribute}
              name={attribute}
              className={this.props.classes.textField}
              margin="normal"
              type="text"
              />}
Источник

Это действительно для текущей версии react-input-mask а также material-ui:

<InputMask
  mask="(0)999 999 99 99"
  value={this.state.phone}
  onChange={this.onChange}
>
  {() => <TextField />}
</InputMask>
Источник

В mui 5 мы можем реализовать это следующим образом с помощью библиотеки Reaction-Mask.

customMaskComponent.js

      import React, { useCallback } from 'react'
import PropTypes from 'prop-types'
import { IMaskInput } from 'react-imask'


const TextInput = React.forwardRef(function TextInput(props, ref) {
    const { onChange, ...other } = props
    return (
        <IMaskInput
            {...other}
            mask='00-0000000'
            definitions={{
                '#': /[1-9]/,
            }}
            placeholder={'XX-XXXXXXX'}
            inputRef={ref}
            onAccept={useCallback(value =>
                onChange({ target: { name: props.name, value } })
            )}
            overwrite
        />
    )
})

TextInput.propTypes = {
    name: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
}

export { TextInput }

и формируем Компонент

      <TextField
    label='Name'
    name={'Name'}
    fullWidth
    value={row.data.name}
    size='small'
    variant='standard'
    required={row.formDesc.name.is_mandatory === 'Y'}
    disabled={row.formDesc.name.is_editable === 'N'}
    onChange={useCallback(event =>
        onChangeRow(
            rowIndex,
            'name',
            event.target.value
        )
    )}
    InputLabelProps={{
        style: {
            fontSize: 18,
        }
    }}
    InputProps={{
        inputComponent: TextInput, // we are added the mask component here
    }}
    error={hasError('name')}
    helperText={getError('name')}
/>
Источник

Вы также можете использовать https://github.com/text-mask/text-mask. Похоже на солидный проект, хотя он больше не поддерживается.

Он предоставляет демонстрационную страницу для тестирования материала и некоторые дополнения , которые я успешно использовал для создания пользовательского поля ввода цены (с компонентом TextField пользовательского интерфейса материала).

Там также есть пример codeandbox , который я нашел где-то на странице документации, я думаю.

Скопируйте/вставьте пример кода и окна здесь (вам нужно будет настроить маску в соответствии с вашими потребностями):

      // ... React imports.

import MaskedInput from "react-text-mask";
import createAutoCorrectedDatePipe from "text-mask-addons/dist/createAutoCorrectedDatePipe";


const autoCorrectedDatePipe = createAutoCorrectedDatePipe("mm/dd/yyyy", {
  minYear: 1900,
  maxYear: 2099
});

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

  return (
    <MaskedInput
      {...other}
      ref={ref => {
        inputRef(ref ? ref.inputElement : null);
      }}
      mask={[/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/]}
      placeholderChar={"\u2000"}
      pipe={autoCorrectedDatePipe}
      guide
      keepCharPositions
    />
  );
}

// ...

<div>
  <TextField
    label="react-text-mask"
    value={values.textmask}
    onChange={handleChange("textmask")}
    InputProps={{
      inputComponent: TextMaskCustom
    }}
    helperText="mm/dd/yyyy"
    variant="outlined"
    margin="dense"
  />
</div>
Источник

Вопрос:

http://codesandbox.io/s/q8v1259oq6, пожалуйста, проверьте этот мой тест этикетки, плавающий LabelText скрыт Как я решаю. - Тилина Сампат

Работа вокруг:

Вы можете контролировать положение метки с помощью плавающей метки. На вашем handleChange посмотрите состояние ввода значения.

... при создании со значением:

constructor(props) {
    super(props);
    let value = props && props.value ? props.value : '';
    let floatingLabelFixed = !!value;

    this.state = {
        value,
        floatingLabelFixed,
    };

    this.handleChange = this.handleChange.bind(this);
}

... при редактировании (onChange):

handleChange(event) {
        let value = event && event.target && event.target.value ? event.target.value : '';
        let floatingLabelFixed = !!value;
        this.setState({
            value,
            floatingLabelFixed
        });
   }

... ваш вклад:

<TextField
        onChange={this.handleChange}
        value={this.state.value}
        floatingLabelFixed={this.state.floatingLabelFixed}/>
Источник 
      <InputMask 
 mask="99999" // Format you need implemented
 value={cellNumber}
 onChange={this.inputHandler}
 placeholder="Cell Number"
 name="cellNumber" 
 required disableUnderline 
 style={style.inputfeild} 
 maskChar= {'_'}> // To display when there is no character typed

 {(inputProps) =>
  <Input {...inputProps}/>}

 </InputMask>

Просто предоставьте все свои реквизиты InputMask, а затем передайте их в качестве входных реквизитов методу обратного вызова, в котором вы отображаете свое текстовое поле или поле ввода, и он должен работать нормально.

Источник
Другие вопросы по тегам