Блог

Я пытаюсь визуализировать некоторые элементы, чтобы получить некоторые входные данные и передать их на свой сервер, но, к сожалению, метод визуализации вообще не работает, все, что я получаю, — это пустая страница, когда я начинаю сеанс реакции

 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(  lt;divgt;  lt;h3gt;You are updating your infolt;/h3gt;  lt;form OnSubmit = {this.OnSubmit}gt;  lt;div className = "form-group"gt;  lt;labelgt;  Name:  lt;/labelgt;  lt;input type = "text" required className="form-control" value={this.state.Name} onChange={this.onChangeName}/gt;     lt;/divgt;   lt;div className = "form-group"gt;  lt;labelgt;  Emaile:  lt;/labelgt;  lt;input type = "text" required className="form-control" value={this.state.Email} onChange={this.onChangeEmail}/gt;     lt;/divgt;     lt;div className = "form-group"gt;  lt;labelgt;  Password:  lt;/labelgt;  lt;input type = "text" required className="form-control" value={this.state.Passworde} onChange={this.onChangePassword}/gt;     lt;/divgt;    lt;div className = "form-group"gt;  lt;labelgt;  Type:  lt;/labelgt;  lt;input type = "text" required className="form-control" value={this.state.Type} onChange={this.onChangeType}/gt;     lt;/divgt;          lt;/formgt;  lt;/divgt; )  } }  export default update_info;  

Я не знаю, в чем проблема с этим кодом или почему он не отображает компоненты внутри него при запуске сеанса реакции

Может ли кто-нибудь помочь мне решить эту проблему, почему моя страница пуста, когда я рендерю компоненты внутри нее.

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

 class Update_info extends React.Component {  constructor(props) {  super(props);  }    render() {  return (  lt;divgt;  {console.log(this.props)}  lt;h3gt;You are updating your infolt;/h3gt;  lt;/divgt;  )  } }  ReactDOM.render(  lt;React.StrictModegt;  lt;Update_info   onChangeEmail={()=gt;{}}   onChangePassword={()=gt;{}}  onChangeName={()=gt;{}}  onChangeType={()=gt;{}}   /gt;  lt;/React.StrictModegt;,  document.querySelector('.react') ); 

 lt;script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"gt;lt;/scriptgt; lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"gt;lt;/scriptgt; lt;div class='react'gt;lt;/divgt;