Маскировка поля в React

Мне нужно замаскировать поле, чтобы они не были видны после ввода. имеющий номер SSN 10 цифр (123-123-1234). Мне нужно маскировать таким образом, чтобы (ххх-ххх-1234). Также при отправке страницы мне нужно отправить оригинальную переменную (123-123-1234) в сервис. Я использовал Cleave, и попробовал тоже с response-input-mask. Любая помощь будет оценена.

    let enrollmentInput
    if (formatted) {
      enrollmentInput = (
        <Cleave key={refName} htmlRef={(ref) => this.refs[refName] = ref}
          className={inputClassNames}
          options={options}
          placeholder={placeholder}
          type={type}
          value={this.props.user[refName]}
        />
      )
    } 
    return 

          <InputMask {...enrollmentInput}  maskChar=" " maskType='ssn'className='control'/>
Источник

2 ответа

Решение

Как только вы обнаружите значение в input поле является действительным, вы можете скопировать существующее значение и сохранить его в состоянии компонентов (this.state). Затем замените значение внутри input элемент по маскированному значению. Наконец, используйте значение, которое вы выбрали ранее, чтобы отправить форму

В качестве примера вы можете сделать следующее:

class HiddenSsnInput extends Component {

    constructor(props) {
        super(props);
        this.state = {
            validSsnEntered: false,
            ssnValue: undefined,
        };
        this._onBlur = this._onBlur.bind(this);
    }

    isValid() {
        return this.state.validSsnEntered;
    }

    value() {
        return this.state.ssnValue;
    }

    _onBlur() {
        const entered = this.refs.ssnInput.value;
        if (isValidSsn(entered) ) { // Implement yourself
            this.setState({validSsnEntered: true, ssnValue: entered});
            // Clear the value in the input
            this.refs.ssnInput.value = maskedSsnInput(entered); // implement yourself
        } else {
            this.setState({validSsnEntered: false, ssnValue: undefined});
        }
    }

    render() {
        return <input ref={(ref) => this.refs.ssnInput} onBlur={this._onBlur} />;
    }
}

Родительский компонент может просто получить значение и действительность SSN, в то время как компонент не должен показывать фактическое значение пользователю после ввода.

Напечатал код без какой-либо проверки, так что будьте осторожны с опечатками

Источник

Если вы хотите отобразить только последние 4 цифры, почему бы не взять только последние 4 символа строки и жестко кодировать X?

handleChange(event) {
  this.setState({fieldValue: event.target.value});
}

<input 
  type="text" 
  value={'xxx-xxx-' + this.state.fieldValue.substr(this.state.fieldValue.length - 4)}
  onChange={this.handleChanges} />

Таким образом, вы сможете отправить this.state.fieldValue на службу.

Источник

Я столкнулся с проблемами, похожими на OP, и закончил тем, что создал пользовательский компонент SSN, чтобы позаботиться о большинстве из них:

https://codesandbox.io/s/64qpz795on

Я хотел замаскировать ввод при вводе. Я хотел, чтобы последние 4 отображались в виде цифр вместо звездочек.

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

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