如何使用本機功能在 React 中顯示或隱藏元素？

在React 中顯示或隱藏元素

問題

在嘗試React.js 時，使用者在顯示或隱藏元素上遇到困難通過點選頁面。他們請求原生 React 函式庫解決方案，而不依賴外部函式庫。

答案

React 大約2020 年

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

React 約2016

使用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中文網其他相關文章！