Блог

 import React from 'react'


export default class Login extends React.Component {

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

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

Это функции, о которых я говорю,
я использую setState для установки значений, вводимых из текстового поля.

 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' >
    
 

Это поля ввода, из которых я вызываю функции.
оба они закодированы точно так же.
Я использую теги для печати данных на веб-странице.
Я также попробовал войти в консоль => onChange, текстовое поле Фамилия.

Но некоторые из них, как набор onChange для текстового поля Фамилия, срабатывает, когда я ввожу значение в текстовое поле Имя.

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

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

onChanege должно быть onChange

Множество проблем.

1. Вы сбрасываете свое состояние на каждом обмене. Вы должны были учитывать предыдущие значения и переопределять состояние, например,

   fnameChange = (e) => { это.setState({…это.состояние, имя: e.целевое значение }); };

   lnameChange = (e) => { this.setState({…это.состояние, lName: e.целевое значение }); };

2. Вам не нужно привязываться, так как вы используете функции со стрелками.
3. Вы можете использовать значение состояния, чтобы сделать ваши входные данные управляемым компонентом.

   Пример: https://stackblitz.com/edit/react-ts-dufrzd?file=Hello.tsx