我的反应页面呈现空白它应该呈现输入框列表但它不工作

Question

我正在尝试渲染一些元素以获取一些输入并将它们传递给我的后端，但不幸的是 渲染方法根本不起作用 当我开始反应会话时，我得到的只是一个空白页

import React, {useState} from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { useHistory } from "react-router-dom";
import { Component } from "react";

export default class user_update_info extends Component{
    constructor(props){
        super(props);

        this.onChangeEmail = this.onChangeEmail.bind(this);
        this.onChangePassword = this.onChangePassword.bind(this);
        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeType = this.onChangeType.bind(this);

        this.state =
        {
            Name:'',
            Email:'',
            Password:'',
            Type:''
        }
    }

onChangeName(e) {
    this.setState({
        Name: e.target.value

    });
}

onChangeEmail(e) {
    this.setState({
        Email: e.target.value

    });
}

onChangePassword(e) {
    this.setState({
        Password: e.target.value

    });
}

onChangeType(e) {
    this.setState({
        Type: e.target.value

    });
}

onSubmit(e){
    e.PreventDefault();
    const user = {
        Name = this.state.Name,
        Email = this.state.Email,
        Password = this.state.Password,
        Type = this.state.Type

    }
    console.log(user)
    window.location = '/SignIn';
}

render(){
return(
    <div>
    <h3>You are updating your info</h3>
    <form OnSubmit = {this.OnSubmit}>
        <div className = "form-group">
            <label>
                Name:
            </label>
            <input type = "text" required className="form-control" value={this.state.Name} onChange={this.onChangeName}/>

            
        </div>

        <div className = "form-group">
            <label>
                Emaile:
            </label>
            <input type = "text" required className="form-control" value={this.state.Email} onChange={this.onChangeEmail}/>

            
        </div>



        <div className = "form-group">
            <label>
                Password:
            </label>
            <input type = "text" required className="form-control" value={this.state.Passworde} onChange={this.onChangePassword}/>

            
        </div>


        <div className = "form-group">
            <label>
                Type:
            </label>
            <input type = "text" required className="form-control" value={this.state.Type} onChange={this.onChangeType}/>

            
        </div>




    
    
    </form>
    </div>
)

}
}

export default update_info;

我不知道该代码有什么问题，或者为什么在启动反应会话时它没有呈现其中的组件

谁能帮我解决这个问题，为什么我在里面渲染组件时页面是空白的。

Answer 1

您有一些错误，不确定这是否有帮助。但至少它现在正在渲染。我不知道你为什么绑定这些元素而不在任何地方使用它们。但是这里显示了 props 具有可以作为 props 传递的功能。我正在控制台记录渲染函数中的道具。希望这会有所帮助。如果没有更多信息，很难确切知道您要做什么。

class Update_info extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div>
        {console.log(this.props)}
        <h3>You are updating your info</h3>
      </div>
    )
  }
}

ReactDOM.render(
  <React.StrictMode>
    <Update_info 
      onChangeEmail={()=>{}} 
      onChangePassword={()=>{}}
      onChangeName={()=>{}}
      onChangeType={()=>{}} 
    />
  </React.StrictMode>,
  document.querySelector('.react')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>