如何解决React onChange无法正常工作有人能帮我吗?
我对这段代码有一个奇怪的问题。我认为一切都是正确的,并将其与其他类似代码进行了比较,但我找不到问题。
问题是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的图片:
解决方法
在使用useState函数初始化状态时,您提到了一个属性nombre:“”作为字符串,然后使用相同的属性初始化状态...此代码太冗长了。
您正在编写冗余代码。您没有使用某些属性初始化状态。可以像稍后在代码后半部分中一样使用扩展运算符添加属性。
const [proyecto,guardarProyecto] = useState({
});
//删除此行。并编辑第一行。休息一切都很好。 // const {nombre} = proyecto;
,
<input
type="text"
className="input-text"
placeholder="Nombre Proyecto"
name="nombre"
value={nombre}
onChange={onChangeProyecto}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。