Как остановить рендеринг всего события onChange компонента в поле ввода текста в реагировать

Question

Я новичок в ReactionJs и создаю функцию аутентификации пользователя.У меня есть два компонента, один заголовок, который имеет navbar, и он содержит маршрутизаторы реакции-маршрутизатор, а другой компонент входа в систему, который имеет два поля ввода ... Проблема с компонентом входа в систему заключается в том, что когда я начинаю печатать в поле ввода, он теряет фокус после каждого символанабрал я знаю, что он перерисовывает весь компонент, но я не знаю, как решить эту проблему

header.js

    changeName = (e) => {
      this.setState({name : e.target.value})
    }
    changePass = (e) => {
      this.setState({password:e.target.value})
    }

    login = () => {
      var name = this.state.name;
      var  password = this.state.password

      var mysession;
      $.ajax({
        url : 'http://localhost:4000/login',
        type : "POST",
        data : {username:name,password:password},
        success : function(data){
          if(data == true){
        this.setState({sessionFlag:true})
        $('#home')[0].click();
          }
          else {
            this.setState({sessionFlag:false})
          }
        }.bind(this)
      })
    }
    render(){
const {name,password} = this.state;
    return (
          <Router>
          <div>
    <Route path="/login" exact component={()=><Login 
    onClickHandle={this.login.bind(this)} 
    onChangeName={this.changeName.bind(this)} 
    onChangePass={this.changePass.bind(this)} 
    name={name} 
    password = {password} />} />
    </div>
          </Router>
        )
    }

login.js

render(){
    return (
<form className="form-horizontal" method ="post">
 <input 
type="text" 
onChange={this.props.onChangeName} 
value={this.props.name}/>

 <input type="text"
onChange={this.props.onChangePass} 
value={this.props.password} />
<input type="button" 
value="Login" 
onClick={this.props.onClickHandle} />
</form>
)
}

Answer 1

Основной проблемой является способ указания компонента Login:

      <Route
        path="/login"
        exact
        component={() => (
          <Login
            onChangeName={this.changeName.bind(this)}
            onChangePass={this.changePass.bind(this)}
            name={this.state.name}
            password={this.state.password}
          />
        )}
      />

При использовании этого синтаксиса дочерний элемент маршрута выглядит как совершенно новый тип компонента с каждымрендеринг (поскольку каждый раз это будет новый экземпляр функции стрелки), поэтому предыдущий компонент Login будет полностью размонтирован, а новый смонтирован.

Вместо этого вы можете добавить в конструктор класса следующее:

this.LoginComponent = () => {
  return (
    <Login
      onChangeName={this.changeName}
      onChangePass={this.changePass}
      name={this.state.name}
      password={this.state.password}
    />
  );
};

И затем используйте следующий синтаксис:

  <Route path="/login" exact component={this.LoginComponent} />

Разница в том, что при указании реквизита component со встроенной функцией стрелки тип компонента будет распознаваться как различный при каждом рендеринге.,Определив функцию один раз в конструкторе, тип компонента будет распознаваться React как непротиворечивый при повторном рендеринге, и он не будет повторно монтироваться.

Я сделал несколько других настроек, чтобы получить работающийпример.Вот полный код: