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

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>

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

My react page is rendring blank it should render a list of inputs boxes but it isnot working

html

javascript

node.js

reactjs

mern