如何使用本机功能在 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中文网其他相关文章！