本日はReactとTypescriptで作ったTodoアプリの改善をしました。
ToDoアプリは以下で学習しながら作りました。
【世界で7万人が受講】Understanding TypeScript - 2020年最新版
https://www.udemy.com/course/understanding-typescript-jp/
このアプリを作り終えたときは、
以下の修正が必要だなと思いました。
1. 新しくTodo追加時にinputfromにそのTodoのテキストが残留してしまう。
2. 空欄でもTodoとして追加されてしまう。
3〜5時間考えて、、、
以下のとおりコードを足し、2点とも改修できましたが、、
(本質的には考えると2番目は解決できていません。)
const enteredText = textInputRef.current!.value;
if(enteredText !== "") {
onAddHandler(enteredText);
textInputRef.current!.value = '';
} else {
alert('入力してください');
}
満足出来ていません。
バリデーションを使えばいいかなと思い、実装していたのですが、、途中で諦めました。。。
まだまだこれからも、TypeScriptもReactも勉強していきます。
追加機能しようと考えているので、できたら、またQiitaに書います!
以下、githubに公開しています。
ありがとうございました。