CODEWITHSUNDEEP
javascriptreactjs
Neo Zhang
Neo Zhang

Reputation: 21

How to writing and call functions in reactJS component file

I am writing a login page, in the input I need a function to change the input type from text to password once the password area onfocus. When I do something in my html single page, everything is fine, but my supervisor told me to use reactJS component to write it. So here is what I do in Password.js:

import React from "react";

export default class Password extends React.Component {
  passInput : function (){
    this.setAttribute("value","");
    this.setAttribute("type", "password");
  },
  render() {
    return (
      <div className="Rectangle">
        <img id="pass" className="Group" src="resources/group.png"/>
        <input className="Input" type="text" value="PASSWORD" onfocus={this.passInput}/>
      </div>
    );
  }
}

I also tired:

      function passInput(passField){
    passField.setAttribute("value","");
    passField.setAttribute("type", "password");
  }

doesn't work also, how should I fix them

Upvotes: 2

Views: 8414

Answers (2)

jered
jered

Reputation: 11581

onfocus is not part of the React event system. onFocus is, however. Try that.

Also you're not setting the input value correctly. It should be element.value = ""; not element.setAttribute("value","");.

https://facebook.github.io/react/docs/events.html#focus-events

import React from "react";

export default class Password extends React.Component {
  passInput : function (e){
    e.target.value = "";
    e.target.setAttribute("type", "password");
  },
  render() {
    return (
      <div className="Rectangle">
        <img id="pass" className="Group" src="resources/group.png"/>
        <input className="Input" type="text" value="PASSWORD" onFocus={this.passInput}/>
      </div>
    );
  }
}

https://jsfiddle.net/fkdm8rnL/2/

Upvotes: 0

wintvelt
wintvelt

Reputation: 14101

In a react way, I would suggest:

  • put the type and the value of the input field in the state of your component.
  • use placeholder to indicate what the user should type, instead of value (see below)
  • for the example, I added an onBlur event handler, which changes type back to text (not something you would want to do in real life)

It is generally a very bad idea to change DOM parts that you want react to manage. I would strongly advise not to use refs to change the type of input component.

A more react-like solution to your challenge would be:

class Password extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      type: "text"
      placeholder: "text field"
    };
  }
  gotFocus() {
    this.setState({ 
      type: "password",
      placeholder: "password field"
    });
  }
  lostFocus() {
    this.setState({ 
      type: "text",
      placeholder: "text field"
    });
  }
  handleChange(event) {
    this.setState ({ 
      value: event.target.value
    });
  }
  render() {
    return (
        <input 
          type={this.state.type} 
          placeholder={this.state.placeholder}
          value={this.state.value} 
          onFocus={this.gotFocus.bind(this)}
          onBlur={this.lostFocus.bind(this)}
          onChange={this.handleChange.bind(this)}/>
    );
  }
}

You can find a working codepen here.

PS: It looks like your setup is initialising value with "password", and as soon as your component gets focus, you change value to (empty).
This will break down in a scenario where user types in password, then clicks outside, and then re-focuses. In that scenario, your component will remove (!) any previously typed password.
HTML has the tag placeholder which will do a better job. (see codepen for example).

Upvotes: 2

Related Questions