时间戳

首页 > 解决方案 > 输入reactjs时如何屏蔽字符串

reactjs - 输入reactjs时如何屏蔽字符串

问题描述

这里的这个小宝贝可以遮住一根绳子

function format(value, pattern) {
    var i = 0,
        v = value.toString();
    return pattern.replace(/#/g, _ => v[i++]);
}

console.log(format(123456789, '## ## ## ###'));

但我希望它在打字时掩盖它

标签： reactjsreact-native

解决方案

你可以onChange在你的input和 React 上使用state来存储被屏蔽的输入。

它是如何工作的：

  • 我使用 :result.substr(0, result.indexOf('u'))当输入不足以获得之前的内容时undefined。

  • 如果用户刚刚删除了一些字符，我允许用户通过检查长度target.value而不应用掩码来删除一些字符。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state =  {
      code: null,
    }
  }
  
  format  =  (value, pattern) => {
    let i = 0,
        v = value.toString();
    let result =  pattern.replace(/#/g, _ => v[i++]);
    if (value.replace(/\s/g, '').length < 9) {
      return result.substr(0, result.indexOf('u')); 
    }
      return result; 
  }
  
  handleInput = ({target}) => {
    // enable user to delete characters
    if(this.state.code && (target.value.length < this.state.code.length)) {
      this.setState({code: target.value})
      return;
    }
    this.setState({
      code: this.format(target.value.replace(/\s/g, ''), '## ## ## ###')
    })
  }

  render() {
    return (
      <div>
        <h1>Masked Input :</h1>
        <input 
          onChange={this.handleInput} 
          value={this.state.code}
          />
      </div>
    );
  }
}


React.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="root"></div>

推荐阅读