React에서 필드 마스킹하기

Question

입력 한 후에 보이지 않도록 필드를 가려야합니다. 의 SSN은 10 자리 (123-123-1234)입니다. 나는 (xxx-xxx-1234)와 같은 방식으로 가면을해야합니다. 또한 페이지를 제출하는 동안 원래 변수 (123-123-1234)를 보내야합니다. Cleave를 사용하고 반응 입력 마스크로도 시도했습니다. 도움이 될 것입니다.

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'/> 

Answer 1

당신이 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가 하드 코딩하지를 표시하려면 오타

Answer 2

조심?

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을 보낼 수 있습니다.