Question

我需要屏蔽该字段，以便在输入后看不到它们。 SSN为10位数（123-123-1234）。我需要以这样的方式掩饰（xxx-xxx-1234）。另外，在提交页面时，我需要将原始变量（123-123-1234）发送到服务。我使用了Cleave，并尝试使用react-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'/>

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的值和有效性，而组件在输入后不必向用户显示实际值。

键入代码而不进行任何检查，因此请注意拼写错误

Answer 2

如果你只想显示最后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发送到服务。

Answer 3

我遇到了与OP类似的问题，最终创建了一个自定义的SSN组件来处理大部分工作：

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

我想在输入时屏蔽输入。我想选择将最后4位显示为数字，而不是用星号隐藏。

该应用程序的其余部分使用redux-form和material-ui。您将在其中看到redux change调用以更新redux存储。我只是对自定义输入进行了样式设置，使其与大多数其他表单输入相匹配。

屏蔽React中的字段

3 个答案: