CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Sankar
Sankar

Reputation: 6522

redux get input text value

I have the following reactjs component.

class Login extends Component {

render() {
    if (this.props.session.Authenticated) {
        return (
            <div></div>
        );
    }
    return (
        <div>
            <input type="text" placeholder="Username" />
            <input type="password" placeholder="Password" />
            <input
                type="button"
                value="Login"
                onClick={() => this.props.LoginAction("admin", "password")}
             />
        </div>
    );
}
}

The Login component makes use of a prop that is set via redux, named "session.Authenticated". If an user session is not authenticated, I present a couple of input fields (one for username and another for password) and a Login button. If I press on the Login button I want to emit an action with the username and password values, passed as parameters. Now, how do I get the values of the two input fields for the parameters ?

IOW, I want to remove the hardcoded "admin, password" in the above code with the values of the two input fields. How to achieve this ?

All the examples point to redux-form which is a new dependency that I do not want to add. I want to keep my dependencies minimal and so using only react, redux and react-redux in my project.

Upvotes: 2

Views: 3225

Answers (1)

degr
degr

Reputation: 1565

Something like this:

  class Login extends Component {
     constructor(props){
        super(props);
        this.state = {
           model = {
              login: "",
              password: ""
           }
        }
     }
  render() {
      if (this.props.session.Authenticated) {
        return null;
    }
    return (
        <div>
            <input type="text" value={this.state.model.value.login} onChange={e => this.updateModel(e.target.value, 'login')}placeholder="Username" />
            <input type="password" value={this.state.model.password }onChange={e => this.updateModel(e.target.value, 'password')} placeholder="Password" />
            <input
                type="button"
                value="Login"
                onClick={() => this.props.LoginAction(this.state.model.login, this.state.model.password)}
             />
        </div>
    );
}

 updateModel(value, name){
    var model = extend({}, this.state.model);
    model[name] = value;
    this.setState({model});
  }
}

Upvotes: 1

Related Questions