Bagaimana untuk Menunjukkan atau Menyembunyikan Elemen dalam Bertindak balas dengan Ciri Asli?

Tunjukkan atau Sembunyikan Elemen dalam React

Soalan

Semasa bereksperimen dengan React.js, pengguna menghadapi kesukaran untuk memaparkan atau menyembunyikan elemen pada halaman melalui klik. Mereka meminta penyelesaian perpustakaan React asli tanpa bergantung pada perpustakaan luaran.

Jawab

React sekitar 2020

Memanfaatkan cangkuk keadaan React, kita boleh kemas kini keadaan komponen dalam panggilan balik onClick:

<code class="javascript">const Search = () => {
  const [showResults, setShowResults] = React.useState(false);
  const onClick = () => setShowResults(true);
  return (
    <div>
      <input type="submit" value="Search" onClick={onClick} />
      { showResults ? <Results /> : null }
    </div>
  );
};</code>

React circa 2016

Menggunakan API legasi React:

<code class="javascript">var Search = React.createClass({
  getDefaultProps() {
    return { resultsHidden: true };
  },
  handleClick: function () {
    this.setState({ resultsHidden: false });
  },
  render: function () {
    return (
      <div className="date-range">
        <input type="submit" value="Search" onClick={this.handleClick} />
        { !this.props.resultsHidden ? <Results /> : null }
      </div>
    );
  }
});</code>

Atas ialah kandungan terperinci Bagaimana untuk Menunjukkan atau Menyembunyikan Elemen dalam Bertindak balas dengan Ciri Asli?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!