How will I get a textboxes values in react js

Question

I have below code and i want to get the values entered in user name and password textbox and send them to node js service. But I dont know how to do that.

Things is that nothing is working. I can only render the page but functions are not working and not able to get the values as well from the textbox. I am very much new to react.

import { FormGroup} from "react-bootstrap";
import "./Login.css"
import "bootstrap/dist/css/bootstrap.min.css"

class LoginClassComponent extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state = {
            username: '',
            password: ''
        }

        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleValidation = this.handleValidation.bind(this);
    }

    handleTextChange = (event) => {
        this.setState({ userName: event.target.value });
        this.setState({ password: event.target.value });
      }

    handleValidation = (event) => {
    console.log(this.props.userName);
        if (!this.state.username) {
            this.setState({ error: 'Please enter User Name' });
            event.preventDefault();
        }
        else if (!this.state.password) {
            this.setState({ error: 'Please enter Password' });
            event.preventDefault();
        }
        else {
            this.setState({ error: "" });
        }
    }

    render() {
        const {username, password} = this.props;
        return (
            <div className="Login">
                <form >
                    <FormGroup controlId="email" bsSize="large">
                        <label htmlFor="exampleInputUserName"><b>User Name</b></label>
                        <input type="username" className="form-control" id="exampleInputUserName" value={this.props.userName} onChange={this.handleTextChange} placeholder="Enter User Name"></input>
                        <div><br></br></div>
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                        <label htmlFor="exampleInputPassword"><b>Password</b></label>
                        <input type="password" className="form-control" id="exampleInputPassword"  value={this.props.password} onChange={this.handleTextChange} placeholder="Enter Password"></input>
                        <div><br></br></div>
                    </FormGroup>
                    <button type="submit" onClick={this.handleValidation} className="btn btn-info">Login</button>
        &nbsp;&nbsp;&nbsp;
        <button type="submit" className="btn btn-danger">Cancel</button>
                    <div><br></br></div>
                    <div id="errorDiv">
                        {(this.state.error !== '') ? <span style={{ color: "red" }}>{this.state.error}</span> : ''}
                    </div>
                </form>
            </div>
        )
    }
}

export default LoginClassComponent;

Answer 1

You can solve your problem 2 ways:

First, you can create 2 seperate onChange methods to update your username/password state

or, even better : add name tag to your form inputs:

name = userName

in your username input and

name = password

for password input.

Then make a method that triggers after onChange Event

function example(e){
   this.setState({
   [e.target.name] : [e.target.value]
  })
}

Make sure that names of your username and password forms are the same as attributes in your state.

Answer 2

You are rendering values from the props and setting values to state onChange. To work properly, you have to render value from the state as well as change values in the state. To do that, store your props values in the state in the constructor and set the value attribute to state values.

import { FormGroup} from "react-bootstrap";
import "./Login.css"
import "bootstrap/dist/css/bootstrap.min.css"

class LoginClassComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
        username: this.props.username,
        password: this.props.password
    }

    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleValidation = this.handleValidation.bind(this);
}

handleTextChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });

  }

handleValidation = (event) => {
console.log(this.props.userName);
    if (!this.state.username) {
        this.setState({ error: 'Please enter User Name' });
        event.preventDefault();
    }
    else if (!this.state.password) {
        this.setState({ error: 'Please enter Password' });
        event.preventDefault();
    }
    else {
        this.setState({ error: "" });
    }
}

render() {
    const {username, password} = this.props;
    return (
        <div className="Login">
            <form >
                <FormGroup controlId="email" bsSize="large">
                    <label htmlFor="exampleInputUserName"><b>User Name</b></label>
                    <input type="text" className="form-control" id="exampleInputUserName" value={this.state.userName} name="username" onChange={this.handleTextChange} placeholder="Enter User Name"></input>
                    <div><br></br></div>
                </FormGroup>
                <FormGroup controlId="password" bsSize="large">
                    <label htmlFor="exampleInputPassword"><b>Password</b></label>
                    <input type="password" name="password" className="form-control" id="exampleInputPassword"  value={this.state.password} onChange={this.handleTextChange} placeholder="Enter Password"></input>
                    <div><br></br></div>
                </FormGroup>
                <button type="submit" onClick={this.handleValidation} className="btn btn-info">Login</button>
    &nbsp;&nbsp;&nbsp;
    <button type="submit" className="btn btn-danger">Cancel</button>
                <div><br></br></div>
                <div id="errorDiv">
                    {(this.state.error !== '') ? <span style={{ color: "red" }}>{this.state.error}</span> : ''}
                </div>
            </form>
        </div>
    )
  }
 }
 export default LoginClassComponent;