javascript - Bagaimana saya dapat menetapkan nilai boolean ke sebuah checkbox menggunakan React dan Typescript?

Saya sedang mengerjakan proyek daftar tugas dan saya mencoba menetapkan nilai boolean pada kotak centang saya. Ketika saya memetakan array toDos saya, saya melihat objek kotak centang saya mengembalikan 'on' ketika tidak dicentang, dan 'Synthetic Base Event' ketika dicentang. (lihat foto di bawah)

Ini adalah komponen untuk kotak centang di dalam "to-do-item" saya

    <div className="checkbox-title-container">
    <div className="check-title-div">
      <div>
        <input
          checked={agreement}
          type="checkbox"
          id="checkbox"
          onChange={props.handleCheck}
          onClick={handleCheck}
        />
      </div>

Fungsi onClick untuk kotak centang

  function ToDoItem(props: {
  toDo: ToDo;
  onDeleteToDo: any;
  prioritySelect: any;
  handleCheck: any;
}) {const [agreement, setAgreement] = useState<boolean>(false);
const handleCheck = () => {
  let agreement:boolean = true;
  setAgreement( !agreement );
}

Saya juga memanggil fungsi lain yang saya log arraynya di jendela dev tools Chrome saya pada fungsi onChange di komponen saya, saya ingin menggabungkan keduanya (fungsi di atas dan yang di bawah) untuk fungsi onChange tetapi jika saya menambahkan fungsi handleCheck di atas ke yang di bawah, itu menjadi di luar cakupan.

            handleCheck={function (updatedCheck: any) {
            const doneToDos = toDos.map((x) => x === toDoItem ? ({ ...x, 
            checked: updatedCheck} as any) : x);
            console.log(doneToDos);

Bagaimana saya dapat menetapkan nilai boolean ke kotak centang untuk memverifikasi apakah item to-do tertentu dicentang? Mengapa ini mengembalikan SyntheticBaseEvent? Mengapa kotak yang tidak dicentang bernilai 'on'?

Jawaban #1

Bagaimana saya bisa menetapkan nilai boolean pada kotak centang untuk memeriksa apakah sebuah item to-do tertentu dicentang?

Cara normal adalah dengan membaca properti event.currentTarget.checked:

• event adalah parameter yang diterima oleh pendengar acara (dalam kode Anda disebut updatedCheck)
• currentTarget adalah node DOM yang memancarkan event
• checked mencerminkan status kotak centang yang dicentang

Mengapa ini mengembalikan SyntheticBaseEvent?

Seperti yang disebutkan di atas, kita biasanya menerima Event sebagai argumen dari event listener. Namun React memproxy/membungkusnya dengan SyntheticEvent sebagai cara untuk menormalkan perilaku di berbagai browser. 99% waktu, Anda bisa menggunakannya seperti Event.

Mengapa kotak yang tidak dicentang 'aktif'?

Dalam pendengar acara Anda, ketika Anda melakukan:

const doneToDos = toDos.map(
  (x) => x === toDoItem
  ? ({
      ...x, 
      checked: updatedCheck // Replace checked property by the updatedCheck argument
    } as any)
  : x // Return toDo as-is if not toDoItem
);
console.log(doneToDos);

...Anda sangat mungkin sedang mencatat status toDos Anda, dengan checked diganti oleh argumen jika toDo adalah toDoItem Anda, dan tidak ada perubahan sama sekali jika tidak (tidak peduli apakah itu dicentang atau tidak). Jadi nilai "on" harus berasal dari kode Anda sendiri di suatu tempat.