如何在reactJs的输入文本字段上停止重新渲染整个组件的onChange事件

Question

我是 reactJs 的新手，我正在创建用户身份验证功能。 我有两个组件，一个是具有导航栏的标题，它包含反应路由器路由器，另一个是具有两个输入字段的登录组件......登录组件的问题是当我开始在输入字段中输入时，它在每个字符后失去焦点输入我知道它正在重新渲染整个组件，但我不知道如何解决这个问题

头文件.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>
        )
    }

登录.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}
          />
        )}
      />

使用这种语法会导致 Route 的子组件在每次渲染时看起来像一个全新类型的组件（因为它每次都会是一个新的箭头函数实例），因此之前的 Login 组件将被完全卸载并安装新的组件。

从https://reactrouter.com/web/api/Route/component ：

当您使用组件（而不是渲染或子组件，如下所示）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。 这意味着如果您为组件 prop 提供内联函数，您将在每次渲染时创建一个新组件。 这会导致卸载现有组件并安装新组件，而不仅仅是更新现有组件。 使用内联函数进行内联渲染时，请使用 render 或 children 道具（如下）。

下面是一个使用render-func 方法的例子：

头文件.js

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Login from "./Login";
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "", password: "" };
    this.changeName = this.changeName.bind(this);
    this.changePass = this.changePass.bind(this);
  }
  changeName = (e) => {
    this.setState({ name: e.target.value });
  };
  changePass = (e) => {
    this.setState({ password: e.target.value });
  };
  render() {
    return (
      <Router>
        <div>
          <div>
            <Link to="/login">Login</Link>
          </div>
          <Route
            path="/login"
            exact
            render={() => (
              <Login
                onChangeName={this.changeName}
                onChangePass={this.changePass}
                name={this.state.name}
                password={this.state.password}
              />
            )}
          />
        </div>
      </Router>
    );
  }
}
export default Header;