How to run script in react

Question

Hey I have a react application and I have a input field that I would like to mask (type="password") while typing the actual password.

I have found a javascript code that does what I need but I cannot seem to make it run with React.

here is the code of the masking function:

http://pastebin.com/vqqaiDuB

but I just cant use it in my view component.

I did try to :

module.exports = MaskedPassword;

but was not able to use the class?!

I am surely missing something big...

how I import it:

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

this is how my component looks like:

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

}

which gives me:

 this.createContextWrapper is not a function

So, you added module.exports = MaskedPassword; at the end of that file, and then how are you importing that class?, and how are you trying to use it? Could you share the rest of the code? — rubentd
– rubentd, Commented Jan 30, 2017 at 12:52
The last line, are you calling it from 'componentDidMount'? You have to make sure it gets called after the element has been rendered — rubentd
– rubentd, Commented Jan 30, 2017 at 13:04
yes I am adding it in componentDidMount, i removed "new" from "how I use it" and now I am getting into the class, but the class prototypes are not accessible. passfield._contextwrapper = this.createContextWrapper(passfield); returns that is not a function — user1780729
– user1780729, Commented Jan 30, 2017 at 13:07

damianfabian · Accepted Answer · 2017-01-30 13:49:33Z

1

Normally this is the way to call external libraries to make changes to components after render, I would suggest to find the react version of your library because maybe It will have problems with the binding (this). Hope this example helps.

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>

edited Jan 30, 2017 at 13:49

answered Jan 30, 2017 at 13:16

damianfabian

1,68112 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

damianfabian Over a year ago

I just edited the answer, The problem is with your library, you will have to update your library, see the example.

rubentd · Accepted Answer · 2017-01-30 13:54:28Z

0

It seems to me the library is not properly encapsulated, or some similar problem. Have you tried using a React component like this one: https://www.npmjs.com/package/react-password-mask

Since its a React component, it will be more natural to integrate it in your code.

Does your maskedPassword library have any feature that react-password-mask is missing?

answered Jan 30, 2017 at 13:54

rubentd

1,2651 gold badge11 silver badges25 bronze badges

1 Comment

user1780729 Over a year ago

Yes react-password-mask does not do the masking while typing ex: "****4" show new character hide rest... and so on..

Collectives™ on Stack Overflow

How to run script in react

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related