Bagaimana untuk Togol Keterlihatan Elemen dalam Reaksi Menggunakan Pengurusan Negeri?

Memaparkan dan Menyembunyikan Elemen dalam React

React menyediakan beberapa pendekatan untuk mengawal keterlihatan elemen secara dinamik berdasarkan peristiwa atau keadaan tertentu. Mari kita terokai salah satu daripada teknik ini.

Dalam coretan kod anda, anda bertujuan untuk menunjukkan atau menyembunyikan komponen Hasil apabila butang komponen Carian diklik. Untuk mencapai matlamat ini, kami boleh memanfaatkan keupayaan pengurusan keadaan yang disediakan oleh React.

Menggunakan React Hooks (untuk versi React 16.8 )

Dengan cangkuk React, anda boleh mengurus keadaan komponen dengan lebih berkesan. Dalam komponen Carian anda, tentukan pembolehubah keadaan yang dipanggil showResults dan tetapkan nilai awalnya kepada palsu. Kemudian, dalam fungsi handleClick, gunakan setShowResults setter untuk mengemas kini keadaan kepada benar, mencetuskan pemaparan semula.

<code class="javascript">import React, { useState } from 'react';

const Search = () => {
  const [showResults, setShowResults] = useState(false);

  const handleClick = () => {
    setShowResults(true);
  };

  return (
    <div className="date-range">
      <input type="submit" value="Search" onClick={handleClick} />
    </div>
  );
};</code>

Dalam komponen Hasil, anda boleh menggunakan pemaparan bersyarat untuk memaparkan keputusan hanya apabila showResults adalah benar.

<code class="javascript">const Results = () => {
  return (
    <div id="results" className="search-results">
      Some Results
    </div>
  );
};</code>

Dalam kaedah pemaparan anda, anda memberikan komponen Hasil secara bersyarat berdasarkan nilai showResults.

<code class="javascript">render() {
  return (
    <div>
      <Search />
      {showResults && <Results />}
    </div>
  );
}</code>

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