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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>
    );
}

Salin selepas log masuk

});

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
  <input type="submit" value="Search" onClick={handleClick} />
  { showResults ? <Results /> : null }
</div>

Salin selepas log masuk