Saya punya masalah dengan React.js. Ini adalah baris kode yang saya miliki:

import React, { useState } from "react";
import { map } from "lodash";

function Steps({ procedure, commandSender, index }) {
  const [selected, setSelected] = useState([]);

  function clickHandler(command, key, index) {
    commandSender(`${command}`)
    if (isSelected((index-key))) setSelected(selected.filter(s => s !== (index-key)))
    else ([...selected, (index-key)])
  }

  function isSelected(key) {
    return selected.includes(key);
  }

  return (
    <>
      {procedure.guide &&
        map(procedure.guide, (key) => (
          <a
            key={`${index}-${key}`}
            className={`bt-blue ${isSelected(index-key) ? "active" : ""}`}
            onClick={() => clickHandler('GUIDE', key, index)}
          >
            {procedure.title}
          </a>
        ))
      }
      {procedure.success &&
        map(procedure.success, () => (
          <a
            key={`${index}-${key}`}
            className={`bt-green ${isSelected(index-key) ? "active" : ""}`}
            onClick={() => clickHandler('SUCCESS', key, index)}
          >
            {procedure.title}
          </a>
        ))
      }
    </>
  );
}

export default Steps;

Seperti yang Anda lihat, saya memetakan prosedur, dan untuk setiap item, saya membuat tag A, yang memanggil fungsi clickHandler. Fungsi ini memanggil fungsi lain dan setSelected. Fungsi setSelected mengatakan tag A mana yang diklik atau tidak. Satu-satunya masalah adalah ketika saya mengklik tag A, itu tidak dipilih.

Tapi saya hanya perlu tag yang saya klik untuk memiliki efek TERPILIH. Saya pikir untuk kalian ini adalah kesalahan yang sangat mudah untuk diperbaiki, tetapi saya benar-benar seorang pemula dengan React. Tolong bantu.

0
afr 7 Juli 2020, 17:21

1 menjawab

Jawaban Terbaik

Saya percaya masalahnya adalah struktur data yang Anda gunakan untuk menyimpan nilai yang dipilih. Saat ini, ini adalah boolean biasa, dan Anda berurusan dengan array.

Anda dapat melakukan hal berikut:

Pertama, kita ubah yang dipilih menjadi array.

const [selected, setSelected] = useState([]);

Lalu, bagaimana kita bisa mengidentifikasi setiap prosedur dengan cara yang unik? Apakah mereka memiliki ID? Dengan judul? Perintah? Anggap saja itu berdasarkan judul.

function clickHandler(title, command) {
    commandSender(`${command}`)

    if(selected.includes(title)) {
        setSelected(selected.filter(s => s !== title)) // we unselected our procedure
    } else {
        setSelected([...selected, title]) // we add our procedure to the selected
    }
}

Terakhir, Anda harus mengubah rendering prosedur Anda, dan menghapus useEffect, karena tidak perlu.

          <a
            className={`bt-green ${selected.includes(procedure.title) ? "active" : ""}`}
            onClick={() => clickHandler(procedure.title, 'SUCCESS')}
          >
            {procedure.title}
          </a>

Selanjutnya, Anda dapat membuat fungsi untuk menentukan apakah prosedur Anda dipilih, sehingga Anda tidak perlu menulis setiap kali selected.includes... :

function isSelected(procedure) {
   return selected.includes(procedure);
}
1
Federico Alecci 7 Juli 2020, 15:06