React onChange无法正常工作有人能帮我吗？

编程问答 2022-06-14

问题描述

我对这段代码有一个奇怪的问题。我认为一切都是正确的，并将其与其他类似代码进行了比较，但我找不到问题。

问题是onChange不在我的React组件上的输入上书写。但是，如果我更改了useState初始值的名称，因此它与我的输入不匹配，那么它将起作用，因为它与初始对象没有关系。

这是我的代码：

 import React,{ Fragment,useState } from "react";

const NuevoProyecto = () => {
  //State para proyecto

  const [proyecto,guardarProyecto] = useState({
    nombre: "",});

  //extraer nombre de proyecto

  const { nombre } = proyecto;

  //Lee contenidos del Input
  const onChangeProyecto = (e) => {
    guardarProyecto({
      ...proyecto,[e.target.name]: e.target.value,});
  };

  //cuando el user envia un proyecto
  const onSubmitProyecto = (e) => {
    e.preventDefault();

    //Validar el proyecto

    //agregar al state

    //reiniciar el form
  };

  return (
    <Fragment>
      <button type="button" className="btn btn-block btn-primario">
        Nuevo Proyecto
      </button>

      <form className="formulario-nuevo-proyecto" onSubmit={onSubmitProyecto}>
        <input
          type="text"
          className="input-text"
          placeholder="Nombre Proyecto"
          nombre="nombre"
          value={nombre}
          onChange={onChangeProyecto}
        />

        <input
          type="submit"
          className="btn btn-primario btn-block"
          value="Agregar Proyecto"
        />
      </form>
    </Fragment>
  );
};

export default NuevoProyecto;

这是带有输入的Components Dev Tool的图片：

enter image description here

解决方法

在使用useState函数初始化状态时，您提到了一个属性nombre：“”作为字符串，然后使用相同的属性初始化状态...此代码太冗长了。

您正在编写冗余代码。您没有使用某些属性初始化状态。可以像稍后在代码后半部分中一样使用扩展运算符添加属性。

const [proyecto，guardarProyecto] = useState（{

}）;

//删除此行。并编辑第一行。休息一切都很好。 // const {nombre} = proyecto;

, 

 <input
   type="text"
   className="input-text"
   placeholder="Nombre Proyecto"
   name="nombre"
   value={nombre}
   onChange={onChangeProyecto}
/>
javascriptonchangeonchangereactjsreactjsreactjsreactjs