redux get input text value

Question

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.

degr · Accepted Answer · 2016-11-10 06:46:34Z

1

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

answered Nov 10, 2016 at 6:46

degr

1,5651 gold badge19 silver badges42 bronze badges

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

6 Comments

Sankar Over a year ago

I am using redux and so need to maintain state globally. Isn't it a bad practice in redux to have component-specific state ?

degr Over a year ago

Your updateModel method should trigger action and action should update store value

degr Over a year ago

React require a lot of boilerplate code, so, try to search some libraries for forms. Absolutely sure, that you will find form component that will do all update magic inside of it form component.

Sankar Over a year ago

I thought about emitting an action during the onChange event of input. But that is a loooooot of boilerplate for a simple action. There is a react-form library but I was trying to minimize dependencies. Seems like it is not possible. Thanks.

degr Over a year ago

I start to work on large react-based project one year ago, and try some components, but there was no something, that satisfy all my requirements. In the end I write my own lib for forms, that use React.cloneComponent for all props.children, and it require minimum of boilerplate code. Unfortunately, after clone child, ''ref" property work not as expected. But if you are interested, I can share code.

|

Collectives™ on Stack Overflow

redux get input text value

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related