如何解决新手-反应打字稿待办事项
您能帮我解决一个简单的问题吗?我一直在React中编程,但是我一直在使用纯js。最近尝试过渡到TS,但我讨厌它的每一点,但试图理解所有这些炒作。您能否使用我编写的部分代码给我一个很好使用打字稿的示例?这是一个简单的待办事项清单,但遇到了我遇到的所有问题-在JS中可以正常工作!
仅向我展示应该如何做,在弄清楚背后的正确逻辑之后,我将尝试编写实际的应用程序。
const NoteApp = () => {
const [notes,setNotes] = useState<Array<string>>()
const [title,setTitle] = useState<string>('')
const [body,setBody] = useState<string>('')
const addNote = (e:any) => {
e.preventDefault()
setNotes([
...notes,{ title,body }
])
setTitle('')
setBody('')
}
const removeNote = (title:any) => {
setNotes(notes.filter((note) => note.title !== title))
}
return (
<div>
<h1>Notes</h1>
{notes.map((note) => (
<div key={note.title}>
<h3>{note.title}</h3>
<p>{note.body}</p>
<button onClick={() => removeNote(note.title)}>x</button>
</div>
))}
<p>Add note</p>
<form onSubmit={addNote}>
<input value={title} onChange={(e) => setTitle(e.target.value)} />
<textarea value={body} onChange={(e) => setBody(e.target.value)}></textarea>
<button>add note</button>
</form>
</div>
)
}
解决方法
Typescript只是一种工具,可让您的代码更易于重编且不会出现错误。 它为您提供了确保约90%的未定义错误消失的方法。 在这种情况下,您可以像这样声明便笺的形状
type Note = {
title: string;
body: string;
};
const NoteApp = () => {
const [notes,setNotes] = useState<Array<Note>>([]);
const [title,setTitle] = useState<string>('');
const [body,setBody] = useState<string>('');
const addNote = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setNotes([...notes,{ title,body }]);
setTitle('');
setBody('');
};
const removeNote = (title: string) => {
setNotes(notes.filter((note) => note.title !== title));
};
const onTileChange = (e: React.ChangeEvent<HTMLInputElement>) => setTitle(e.target.value);
const onBodyChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => setBody(e.target.value);
return (
<div>
<h1>Notes</h1>
{notes.map((note) => (
<div key={note.title}>
<h3>{note.title}</h3>
<p>{note.body}</p>
<button onClick={() => removeNote(note.title)}>x</button>
</div>
))}
<p>Add note</p>
<form onSubmit={addNote}>
<input value={title} onChange={onTileChange} />
<textarea value={body} onChange={onBodyChange} />
<button type="submit">add note</button>
</form>
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。