Bagaimana untuk Togol Keterlihatan Elemen dalam React?

Tunjukkan atau Sembunyikan Elemen dalam React

Dalam aplikasi React, anda selalunya perlu menunjukkan atau menyembunyikan elemen berdasarkan pada interaksi pengguna. Mari kita terokai cara untuk mencapai ini menggunakan fungsi React asli.

var Search= React.createClass({</p>
<pre class="brush:php;toolbar:false">handleClick: function (event) {
    console.log(this.prop);
},
render: function () {
    return (
        <div className=&quot;date-range&quot;>
            <input type=&quot;submit&quot; value=&quot;Search&quot; onClick={this.handleClick} />
        </div>
    );
}

});

var Results = React.createClass({

render: function () {
    return (
        <div id=&quot;results&quot; className=&quot;search-results&quot;>
            Some Results
        </div>
    );
}

});

React.renderComponent(

, document.body);

Dalam contoh ini:

• Komponen carian memaparkan butang yang mencetuskan kaedah handleClick.
• Komponen hasil mewakili elemen yang ingin kita togol.

Togol Keadaan Elemen

Untuk menogol keterlihatan elemen, kita perlu mengekalkan negeri. Dalam versi moden React, kami boleh menggunakan cangkuk useState untuk mengurus keadaan komponen:

const Search = () =&gt ; {<br> const [showResults, setShowResults] = useState(false)<br> const handleClick = () => setShowResults(true)<br> return (</p>
<pre class="brush:php;toolbar:false"><div>
  <input type="submit" value="Search" onClick={handleClick} />
  { showResults ? <Results /> : null }
</div>

)
}

const Keputusan = () => (

Some Results

)

ReactDOM.render(< ;Cari />, document.querySelector("#container"))

Di sini:

• useState memulakan pembolehubah keadaan (showResults) dengan nilai awal (false).
• setShowResults ialah fungsi yang mengemas kini keadaan showResults, mencetuskan pemaparan semula.
• Apabila butang diklik, handleClick menetapkan showResults kepada benar, menjadikan komponen Results.

Pendekatan ini menyediakan cara asli dan cekap untuk menunjukkan atau menyembunyikan elemen dalam aplikasi React.

Atas ialah kandungan terperinci Bagaimana untuk Togol Keterlihatan Elemen dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!