我的反應頁面呈現空白，它應該呈現輸入框串列，但它不起作用

我正在嘗試渲染一些元素以獲取一些輸入并將它們傳遞給我的后端但不幸的是渲染方法根本不起作用我在開始我的反應會話時得到的是一個空白頁面

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;

我不知道該代碼有什么問題，或者為什么在啟動反應會話時它沒有呈現其中的組件

任何人都可以幫助我解決這個問題，為什么我在其中渲染組件時我的頁面是空白的。

uj5u.com熱心網友回復：

您有一些錯誤，不確定這是否有幫助。但至少它現在正在渲染。我不知道你為什么要系結這些元素而不在任何地方使用它們。但是這里顯示了 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>

標籤：javascript html 节点.js 反应 默恩

上一篇：AJVJsonSchema驗證器報告看似不正確的錯誤

下一篇：如何撰寫Selenium自動化測驗的偽代碼？