Saya memiliki halaman dengan komponen React yang menggunakan beberapa tag detail/ringkasan:

const React = require("react");

class samplePage extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return (

        <div>
            <details>
                <summary>
                    First text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Second text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Third text detail.
                </summary>
            </details>

            <button onClick="OpenAll()">Open All Details.</button>
            <button onClick="CloseAll()">Close All Details.</button>
        </div>
    );
  }
}

module.exports = samplePage;

Saya memiliki siteConfig.js global untuk mengonfigurasi skrip saya:

scripts: [
    "js/script1.js",
    "js/script2.js",
    "js/script3.js"
],

Dengan 2 fungsi untuk menambah atau menghapus atribut "buka" dari tag detail di atas:

function CloseAll() {
  $("details").removeAttr("open");
}

function OpenAll() {
    $("details").attr("open", "open");
}

Saya tahu 2 fungsi dalam file skrip utama saya diimpor melalui siteConfig.js, karena fungsi saya yang lain berfungsi tanpa masalah. Seperti yang dapat dilihat dari halaman contoh, tag tombol yang memulai fungsi OpenAll / CloseAll terletak di dalam div dengan tag detail lainnya.

Saya pikir metode saya bagus, tetapi tidak ada tombol yang menghasilkan efek yang diinginkan. Saya menduga ini ada hubungannya dengan ruang lingkup fungsi atau sesuatu tentang pengaturan saya saat ini (saya menggunakan Docusaurus, yang agak mirip dengan "Buat Aplikasi Bereaksi"). Saya tidak berpikir saya telah melakukan sesuatu yang luar biasa untuk proyek seperti ini. Hargai umpan balik apa pun.

0
Lichtung 27 Oktober 2019, 14:39

1 menjawab

Jawaban Terbaik

Gunakan status untuk menyetel atribut ke true atau false, seperti itu. (Perhatikan bahwa Anda dapat menggunakan kait seperti di sini tetapi juga state dan setState lama yang bagus. Anda juga tidak memerlukan siteConfig atau dua fungsi yang didefinisikan di sana.

const React = require("react");

const samplePage = () => {
    const [isOpen, setIsOpen] = React.useState(false); 

    return (
        <div>
            <details open={isOpen}>
                <summary>
                    First text detail.
                </summary>
            </details>
            <details open={isOpen}>
                <summary>
                    Second text detail.
                </summary>
            </details>
            <details open={isOpen}>
                <summary>
                    Third text detail.
                </summary>
            </details>

            <button onClick={() => setIsOpen(false)}>Open All Details.</button>
            <button onClick={() => setIsOpen(true)}>Close All Details.</button>
        </div>
    );
  }
}

module.exports = samplePage;
2
Lichtung 28 Oktober 2019, 11:49