React で要素の可視性を切り替える方法は?

React で要素を表示または非表示にする

React アプリケーションでは、多くの場合、要素に基づいて要素を表示または非表示にする必要があります。ユーザーインタラクションについて。ネイティブの React 機能を使用してこれを実現する方法を見てみましょう。

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);

この例では:

• 検索コンポーネントは、handleClick メソッドをトリガーするボタンをレンダリングします。
• 結果コンポーネントは、切り替えたい要素を表します。

要素の状態の切り替え

要素の可視性を切り替えるには、次のことを維持する必要があります。州。 React の最新バージョンでは、useState フックを使用してコンポーネントの状態を管理できます:

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 結果 = () => (

Some Results

)

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

ここ:

• useState は状態変数 (showResults) を初期値で初期化します(false)。
• setShowResults は、showResults の状態を更新し、再レンダリングをトリガーする関数です。
• ボタンをクリックすると、handleClick は showResults を true に設定し、Results コンポーネントをレンダリングします。

このアプローチは、React アプリケーションで要素を表示または非表示にするためのネイティブで効率的な方法を提供します。

以上がReact で要素の可視性を切り替える方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。