import React from 'react'


export default class Login extends React.Component {

handleSubmit=(e)=>
{
    e.preventDefault();
    console.log('you clikked submit')
 }    

state={
    fName:'',
    lName:'',
    gender:'',
  }  

These are the functions i am talking about i am using setState to set the values input from the textfield.

fnameChange = (e) =>{
this.setState({fName:e.target.value})
}

lnameChange = (e) =>{
this.setState({lName:e.target.value})
}



render() { 
    return (
    <div>
    <h1>Login</h1>
    <form 
    onSubmit={this.handleSubmit}
    className='add-form' autoComplete="off">
        
        <div className='form-control' >
    

These are the input fields from where i am calling the functions. both are coded in exact same way. I am using tags for printing the data to webpage. I also tried console logging => onChange, the lastName textfield.

But some how onChange set for lastName textfield is getting fired when i enter value in firstName textfield.

       <div>
            <label >First Name</label>
            <input type='text' name='firstName' onChange={this.fnameChange.bind(this)} required maxLength={10}/>
            <h1>{this.state.fName}</h1>
            </div>  
            <div>
            <label >Last Name</label>
            <input type='text' name='lastName' onChanege={this.lnameChange.bind(this)} required maxLength={10}/>
            <h1>{this.state.lName}</h1>
            </div>
            <div>
            <label >Email</label>
            <input type='text' name='email' required />
            <h1>{this.state.fName}</h1>
            </div>  
        </div>
        
        
        <div className='form-control form-control-check'>
            <p><label>Male</label>
            <input type='radio' name='gender' value='male' required/></p>
            
            <p><label>Female</label>
            <input type='radio' name='gender' value='female'/></p>

            <p><label>Other</label>
            <input type='radio' name='gender' value='other'/></p>
            
        </div>
        <div className='form-control'>
        <input type='submit' value='Login'
        className='btn btn-block'
        />
        </div>   

    </form>
</div>
    )    
    
}
}

CodePudding user response：

<input type='text' name='lastName' onChanege={this.lnameChange.bind(this)} required maxLength={10}/>

onChanege should be onChange

CodePudding user response：

Multiple problems.

1. You are resetting your state on each onChange. You had to consider the previous values and override the state like,

   fnameChange = (e) => { this.setState({...this.state, fName: e.target.value }); };

   lnameChange = (e) => { this.setState({...this.state, lName: e.target.value }); };

2. You don't need to bind as you are using arrow functions.

3. You can use the value of state to make your inputs a controlled component.

   Example: https://stackblitz.com/edit/react-ts-dufrzd?file=Hello.tsx