在 React 中屏蔽字段

Question

我需要屏蔽该字段，以便它们在输入后不可见。具有 10 位数的 SSN (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 store。我只是设置了自定义输入的样式以匹配我拥有大多数其他表单输入的方式。

在 React 中屏蔽字段

Masking a field in React

javascript

input

masking

reactjs