Jadi saya memiliki daftar render yang dibuat dari array dan setiap elemen dalam daftar memiliki tombol menu yang menampilkan modal untuk setiap elemen, sekarang masalahnya adalah jika saya mengklik tombol indeks 0 alih-alih hanya menampilkan indeks 0 itu menunjukkan untuk semua, hal yang sama untuk semua indeks lainnya

import React, {useState} from 'react'
import ListModal from './listModal';


export const Todo = ({ Todos, deleteItem }) => {
    const [show, setshow] = useState(false);
    const unshow = () => {
        setshow(current => !current)
    }
    return (
        <ul>
            {
                Todos.map((item, index) => (
                    <li key={index}>
                        <button className="deleteBoard" onClick={unshow}>•••</button>
                        <span>{item}</span>
                        <ListModal value = {item} show={show} unshow = {unshow} />
                    </li>
                ))
            }
        </ul>
    );
};

ListModal diatur untuk menampilkan: "tidak ada" jadi ketika saya mengklik tombol itu menampilkan modal daftar sebaliknya

import React, { useState } from 'react'
import firebase from 'firebase/app';
import { db } from '../Firebase/Firebase';
import { useRouteMatch } from 'react-router-dom';


const ListModal = ({ value, show, unshow }) => {
    const [text, settext] = useState(value)
    const styles = {
        display: show ? 'flex' : 'none'
    }
    const textChange = (e) => {
        settext(e.target.value)
    }
    return (
        <div className="listModal" style={styles}>
            <div className="listContent">
                <textarea value={text} rows="6" onChange={textChange}></textarea>
                <button>Save</button>
                <button onClick={unshow}>Cancel</button>
            </div>
            <div className="listOption">
                <ul>
                    <li onClick={() => {deleteItem(value);moveCard()}}>Delete</li>
                </ul>
            </div>

        </div>
    )
}
export default ListModal

Terima kasih sebelumnya, saya tidak keberatan menulis ulang, tolong bantu saya. Terima kasih

0
Miriam 11 Januari 2021, 22:56

3 jawaban

Jawaban Terbaik

Saya tidak perlu mengubah apa pun di komponen listModal saya. Ini adalah komponen induk tempat saya membuat beberapa perubahan

import React, { useState } from 'react'
import ListModal from './listModal';

export const Todo = ({ Todos, deleteItem }) => {
    const [show, setshow] = useState(false);
    const [selected, setselected] = useState("")
    const toggle = () => {
        setshow(show => !show)
    }
    const select = (item) => {
        setselected(item)
    }
    return (
        <>
            <ul>
                {
                    Todos.map((item, index) => (
                        <li key={index}>
                            <button className="deleteBoard" onClick={() => { toggle(); select(item) }}>•••</button>
                            <span>{item}</span>
                        </li>
                    ))
                }
            </ul>
            <ListModal val={selected}  deleteItem={deleteItem} show={show} toggle={toggle} />
        </>
    );
};

Penjelasan:: Alih-alih menempatkan listModal dalam metode peta sehingga membuat komponen listModal untuk setiap elemen yang dirender dalam daftar. Saya menyimpannya di luar metode peta jadi saya hanya memiliki satu komponen listModal untuk setiap elemen dalam metode peta. Semua perubahan itu adalah nilai yang ditampilkan oleh listModal.

Saya juga membuat pemilihan metode yang mengambil parameter (item) yang merupakan nilai yang ditampilkan dan menyimpannya di terpilih. dipilih adalah keadaan, saya kemudian meneruskan terpilih ke listModal.

Itu saja yang saya lakukan, maaf jika penjelasan saya buruk.

0
Miriam 12 Januari 2021, 10:50

di komponen induk saya mengatur modal dan meneruskan nilainya

Todos.map((item, index) => (
                    <li key={index}>
                        <ListModal value={item}/>
                    </li>
                ))

Kemudian di komponen anak saya mengatur fungsi buka dan tutup

const [show, setshow] = useState(false);

const styles = {
        display: show ? 'flex' : 'none'
    }
   
    const isOpen = () => {
        setshow(show => !show);
    }

setelah itu di komponen turunan, Anda dapat merender info item dan tombol dengan sekali klik

//Whatever stuff you want to render from the passed in data


return (
        <span>{value}</span>
        <button onClick={() => {() => isOpen()}}>View</button>

        <div className="listModal" style={styles}>
            <div className="listContent">
                <textarea value={text} rows="6" onChange={textChange}></textarea>
                <button>Save</button>
                <button onClick={unshow}>Cancel</button>
            </div>
            <div className="listOption">
                <ul>
                    <li onClick={() => {deleteItem(value);moveCard()}}>Delete</li>
                </ul>
            </div>

        </div>
    )


0
Keaton Benning 11 Januari 2021, 20:16

Saya sarankan Anda melakukan pendekatan berikut yang masih dapat ditingkatkan lebih lanjut:

  • alih-alih metode unshow, buat dua metode showModal dan hideModal
    const showModal = (item) => {
      setSelectedTodo(item);
      setshow(true);
    }
    const hideModal = () => {
      setSelectedTodo('');
      setshow(false);
    }
  • gunakan useState lain untuk Todo yang dipilih
    const [selectedTodo, setSelectedTodo] = useState('')
  • hanya memiliki satu ListModal instance setelah daftar, yang mendapatkan item dari status
    ...
    <ul>
    {
      Todos.map((item, index) => (
        ...
      ))
    }
    </ul>
    <ListModal value={selectedTodo} show={show} unshow = {hideModal} />
    ...
  • saat mengklik tombol apa pun, berikan Todo saat ini ke metode showModal

    <button className="deleteBoard" onClick={()=> showModal(item)}>•••</button>

0
Zac 11 Januari 2021, 20:35