フィールドをリアクションでマスクする

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要素内の値をマスク値で置き換えます。コンポーネントはありませんしながら、親コンポーネントは、単にSSNの値と妥当性をつかむことができる

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

：最後に、あなたが次のことを行うことができます例として、フォーム

を送信する前に、あなたが選んだ値を使用入力後にユーザーに実際の値を表示します。

は、任意のチェックを行わずにコードを型付きので、あなたは、文字列の最後の4文字を取って、Xをハードコーディングするだけでなく、なぜ、唯一の最後の4桁の数字を表示したい場合はタイプミス

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をサービスに送信することができます。