2021.04.15毎日の回顧

Facts

ですべてのタスクcssを完了しました.(3時間30分)

当選番号のリアルタイムチェック機能を実現しました.(2時間)

Findings & Feelings

すべての楽透任務cssを完成した。

目標はcssを2時間程度完成させ,機能実現を完了しprを行うことである.選択肢がありません.6つの当選番号と1つのボーナス番号を簡単にflexで並べ替えるだけでいいのですが、結構時間がかかりました.2時間30分くらいかかったようです.
長い時間をかけて思い出したのは、当選番号が画面の外に現れたことだ.明らかにappはwidthを固定し、widthを通過している.ul、liにwidthを設定しても始まらない.Inputのサイズは自動的に小さくなっていません.flex-growで学習し、qualify-contentも設定したが動作せず、最終的にinputのwidthを固定値に指定する.あまり満足のいく方法ではないので、週末に勉強するつもりです.
また、margin 0 autoと入力されても中央ソートができないという問題がある.これはハンケルの助けでbox-sizing: border-boxを用いて解決された.よく使う属性ですが、思考を止めました.こんな小さなことで時間を無駄にして、ミスを減らそうと思った.

当選番号のリアルタイム検出機能を実現

リアルタイム検出機能には時間がかかります.検証を体現するだけでなく、定量化と命名も重視しなければならない.実は、最初は脳が止まっていて、どうやって始めればいいか分かりません.フェアの助けで元気を出して、onChangeイベントが発生するたびに、すべてのinputの値を受け取り、検査で実現します.
私は知らない事実を知っていて、反応する事件はバニラjsの事件とは違います.したがって、バニラjsのonchangeイベントはフォーカスが消えたときに1回呼び出され、reactionのonchangeイベントはinputに値を入力したときに実行される.つまり、バニラjsのinput eventに似た働き方をしています.
このような違いがあるとは知らなかった.また,さっき検索したところ,反応器でform元素からinputのvalueを受信して使用すると,既存のjsのように入力されることが分かった.valueは使用しません.

handleChange(event) {
  this.setState({value: event.target.value});
}
  
<input type="text" value={this.state.value} onChange={this.handleChange} />

このように使うべきだ.inputに値を入力した後、ステータスをsetStateに変更し、変更したステータスをinputの値に割り当てます.なぜこのように使うのかまだ分かりません.正式な書類にあります.reactは、ユーザ入力値を直接制御する方法で제어 컴포넌트と呼ばれる.코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다.というメリットがあるそうです.
このドキュメントを見て、今までに書いたコードを書き直すべきだと思います.大変なことになった.しかし、これが必要なのかオプションなのか分かりません.明日はもっと勉強します.

Plans

楽透タスクpr

ラーニングログ

の作成