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

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

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

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

ログイン後にコピー

});

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

ログイン後にコピー