反应 onChange 不起作用。 有人能帮我吗？

Question

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

问题是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;

这是带有输入的组件开发工具的图片：

Answer 1

在使用 useState 函数初始化状态时，您提到了一个属性 nombre: "" 作为字符串，然后您使用相同的属性初始化状态......这段代码非常冗长。

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

const [proyecto,guardarProyecto] = useState({

});

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

Answer 2

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