Cuando alguna vez envío este formulario, event.target resulta ser nulo, ¿esto debería contener el valor del campo de texto? ¿Por qué sucede esto, ya que se supone que tienen los valores del campo de texto?

import React, { Component } from "react"; class Login extends Component { constructor(props) { super(props); this.state = {}; this.fun = props; } handleOnsubmit(event) { event.preventDefault(); console.log("Inside "); console.log(event.target); } render() { return ( {amp}lt;{amp}gt; {amp}lt;form onSubmit={this.handleOnsubmit}{amp}gt; UserName: {amp}lt;input type="text"{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;br{amp}gt;{amp}lt;/br{amp}gt; Password: {amp}lt;input type="text"{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;br{amp}gt;{amp}lt;/br{amp}gt; {amp}lt;button type="submit"{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/{amp}gt; ); } } export default Login; 

event.target es una matriz de controles de formulario. Entonces, para acceder al valor de la primera entrada (UserName en su caso), use event.target[0].value

Así se verá OnSubmit

  handleOnsubmit(event) { event.preventDefault(); console.log("Inside "); console.log(`UserName: ${event.target[0].value}`); console.log(`Password: ${event.target[1].value}`); } 

Y demo

Funciona. Su cheque está mal …

mira esta demo https://codesandbox.io/s/compassionate-bhaskara-qr44t

ingrese la descripción de la imagen aquí

El objeto de event dentro del método handleOnsubmit se refiere al evento de envío que ocurrió en su formulario. Por lo tanto, su objetivo será la forma misma (no null ).

En lugar de obtener el valor de la entrada cuando se envía el formulario, puede mantener dos propiedades de estado que realizan un seguimiento del estado de las entradas de texto en su formulario. Luego, cada vez que cambien sus entradas (usando el evento onChange ), puede actualizar sus respectivos estados. Esto significa que cuando envíe su formulario, puede hacer referencia a este estado usando this.state :

 class App extends React.Component { constructor(props) { super(props); this.state = { username: "", password: "" }; } handleOnsubmit = e ={amp}gt; { // e.target here is the form e.preventDefault(); console.log(this.state.username, this.state.password); }; handleInput = e ={amp}gt; { // e.target here is the input element this.setState({[e.target.name]: e.target.value }); }; render() { return ( {amp}lt;{amp}gt; {amp}lt;form onSubmit={this.handleOnsubmit}{amp}gt; UserName: {amp}lt;input type="text" name="username" onChange={this.handleInput} /{amp}gt; {amp}lt;br /{amp}gt; Password: {amp}lt;input type="password" name="password" onChange={this.handleInput} /{amp}gt; {amp}lt;br /{amp}gt; {amp}lt;button type="submit"{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/{amp}gt; ); } } 

Ver ejemplo de trabajo aquí

También tenga en cuenta que la etiqueta de input se cierra automáticamente.