Bereaksi - dua tombol - klik pada salah satunya akan membuka keduanya

Saya memiliki komponen tombol React dengan pengendali onClick dan statusnya - yang menyatakan apakah komponen tersebut dibuka saat diklik. Jika saya merender dua komponen tersebut dalam wadah pembungkus, dan saya mengklik salah satunya, kedua tombol memperbarui status. Bagaimana cara menangani status, sehingga hanya satu tombol yang diperbarui tanpa menggunakan id?

import React, {useState} from 'react';

const Button = (props) => {
   const [open, setOpen] = useState(false);
   const text = open ? 'Open' : 'Closed';
   const toggleButton = () => { setOpen(!open) };
   
   return (
     <button onClick={toggleButton}>{text}</button>
   )
}

// parent component
import React from 'react';
import Button from './Button'

const ButtonsWrapper = () => {
    return (
        <div>
            <Button />
            <Button />
        </div>
    )
}

Saya juga mencoba membalikkan logika dan menempatkan status dalam komponen pembungkus, dan kemudian meneruskan handler onClick sebagai props ke sebuah tombol, tetapi situasinya sama. Keduanya mengubah status secara bersamaan ketika salah satunya diklik.

Saya menggunakan React Hooks.


reactjs react-hooks
person bakrall    schedule 11.02.2021    source sumber
comment
Bisakah Anda mereproduksi masalah Anda di codeandbox untuk kami?   -  person Gandzal    schedule 11.02.2021
comment
Tolong beri saya waktu.   -  person bakrall    schedule 11.02.2021
comment
Saya tidak melihat ada yang salah dengan kode ini. Setuju bahwa biola atau sesuatu akan baik.   -  person squillman    schedule 11.02.2021
comment
Saya memeriksanya lagi dan kode ini berfungsi - codepen.io/bakrall/pen/WNooMbR - Anda Kanan. Terima kasih banyak atas bantuannya!   -  person bakrall    schedule 11.02.2021

Jawaban (1)


arrow_upward
0
arrow_downward

Pemahaman saya adalah Anda mengatakan bahwa ketika Anda mengklik satu tombol, kedua tombol tampaknya statusnya diperbarui, tetapi Anda hanya ingin tombol yang diklik memperbarui statusnya. (yaitu jika Anda mengklik Tombol A hanya tombol itu yang akan menampilkan 'Buka' sebagai teksnya, Tombol B akan terus menampilkan teks tertutup)

Jika hal di atas benar, maka kode Anda seharusnya sudah melakukan hal yang benar. Jika tidak maka Anda mungkin memiliki bug di tempat lain yang menyebabkan hal ini.

Namun jika Anda ingin mengklik satu tombol dan KEDUA harus beralih status, maka Anda dapat mencapainya dengan melacak status di komponen induk:

import React, {useState} from 'react';

const Button = (props) => {
   const text = props.isOpen ? 'Open' : 'Closed';

   const handleClick = () => {
     // do some stuff you want each button to do individually
     .....

     props.onClick()
   }
   
   return (
     <button onClick={handleClick}>{text}</button>
   )
}

// parent component
import React from 'react';
import Button from './Button'

const ButtonsWrapper = () => {
    const [buttonState, setButtonState] = useState(false)
    return (
        <div>
            <Button onClick={() => setButtonState(!buttonState)} isOpen={buttonState} />
            <Button onClick={() => setButtonState(!buttonState)} isOpen={buttonState} />
        </div>
    )
}
person dh_vie    schedule 11.02.2021
comment
Pemahaman pertama Anda benar - Saya ingin mengklik salah satunya dan hanya yang ini yang memperbarui status. Tapi Anda mengatakan itu seharusnya berhasil. - person bakrall; 11.02.2021
comment
Terima kasih banyak atas bantuannya. - person bakrall; 11.02.2021