React 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}
/>

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

React onChange is not working. Can someone help me?

javascript

onchange

reactjs