ネイティブ機能を使用して React で要素を表示または非表示にする方法は?

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

質問

React.js を試しているときに、ユーザーが要素を表示または非表示にするときに問題が発生しました。クリックしてページを開きます。彼らは、外部ライブラリに依存しないネイティブ React ライブラリ ソリューションを要求しています。

回答

2020 年頃の React

React の状態フックを活用すると、次のことが可能になります。 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>

2016 年頃の React

React のレガシー API の使用:

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

以上がネイティブ機能を使用して React で要素を表示または非表示にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。