Question

嘿我有一个反应应用程序，我有一个输入字段，我想在输入实际密码时屏蔽（键入=＆＃34;密码＆＃34;）。

我找到了一个javascript代码，可以满足我的需求，但我似乎无法使用React运行它。

这是掩蔽函数的代码：

但我不能在我的视图组件中使用它。

我确实尝试过：

module.exports = MaskedPassword;

但是无法使用该课程？！

我肯定错过了一些大事......

我如何导入它：

import maskedInput from './../../public/MaskedPassword';

这就是我的组件的样子：

export default class DriversLicense extends Component {
constructor(props){
  super(props);
  this.state ={};
}

componentDidMount() {
  maskedInput(document.getElementById("demo-field"), '\u25CF');
}

render() {
  return (
  <div>
    <form id="demo-form" action="#">
      <fieldset>
        <input type="password" className="password" id="demo-field" name="pword" onChange={this.demoChange}/>
      </fieldset>
    </form>
  </div>
  );
}

}

给了我：

 this.createContextWrapper is not a function

Answer 1

通常这是调用外部库在渲染后对组件进行更改的方法，我建议找到库的反应版本，因为它可能会遇到绑定问题（这个）。希望这个例子有所帮助。

function maskedInput(ele, symbol, obj) {  
  //this here is not the function
  ele.value = this.someOtherFunction()
  
}

maskedInput.prototype = {
  someOtherFunction: function(){
    return "Hello"
  }
}

function maskedInputGood(ele, symbol, obj) {  
  const someOtherFunction = function(){
    return "Hello"
  }
  ele.value = someOtherFunction()
  
}

maskedInput.prototype = {
  someOtherFunction: function(){
    return "Hello"
  }
}

var App = React.createClass({

componentDidMount() {
  maskedInputGood(document.getElementById("demo-field"), '\u25CF');
  maskedInput(document.getElementById("demo-field"), '\u25CF');
},

render() {
  return (
  <div>
    <form id="demo-form" action="#">
      <fieldset>
        <input type="password" className="password" id="demo-field" name="pword" onChange={this.demoChange}/>
      </fieldset>
    </form>
  </div>
  );
}
})

ReactDOM.render(<App />,document.getElementById('app'))

<html>
  <body>
    
<div id='app'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    
  </body>
</html>

Answer 2

在我看来，库没有正确封装，或者类似的问题。您是否尝试使用类似这样的React组件：https://www.npmjs.com/package/react-password-mask

由于它是一个React组件，因此将它集成到您的代码中会更自然。

你的maskedPassword库是否有任何缺少react-password-mask的功能？

如何在反应

2 个答案: