首页
前端开发
在 React 中显示或隐藏元素

在 React 中显示或隐藏元素 [英] Show or hide element in React

查看：38 发布时间：2021/12/2 9:48:06 javascript reactjs

本文介绍了在 React 中显示或隐藏元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我第一次使用 React.js，但找不到通过单击事件在页面上显示或隐藏某些内容的方法.我没有将任何其他库加载到页面，所以我正在寻找使用 React 库的一些本机方式.这就是我迄今为止所拥有的.我想在点击事件触发时显示结果 div.

var Search= React.createClass({handleClick:函数(事件){控制台日志(this.prop)；},渲染:函数(){返回 (<div className="日期范围"><input type="submit" value="Search" onClick={this.handleClick}/>

);}});var 结果 = React.createClass({渲染:函数(){返回 (<div id="results" className="search-results">一些结果

);}});React.renderComponent(<Search/> , document.body);

解决方案

React 大约 2020 年

在 onClick 回调中，调用状态钩子更新状态并重新渲染的 setter 函数:

const Search = () =>{const [showResults, setShowResults] = React.useState(false)const onClick = () =>设置显示结果(真)返回 (<div><input type="submit" value="Search" onClick={onClick}/>{显示结果?<结果/>: 空值 }

)}const 结果 = () =>(<div id="results" className="search-results">一些结果

)ReactDOM.render(

, document.querySelector("#container"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script><div id="容器"><!-- 此元素的内容将替换为您的组件.-->

大约在 2014 年做出反应

关键是使用 setState 更新点击处理程序中组件的状态.当应用状态更改时，render 方法将再次使用新状态调用:

var Search = React.createClass({getInitialState:函数(){返回{显示结果:假}；},点击:函数(){this.setState({ showResults: true });},渲染:函数(){返回 (<div><input type="submit" value="Search" onClick={this.onClick}/>{ this.state.showResults ?<结果/>: 空值 }

);}});var 结果 = React.createClass({渲染:函数(){返回 (<div id="results" className="search-results">一些结果

);}});ReactDOM.render( <Search/> , document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script><div id="容器"><!-- 此元素的内容将替换为您的组件.-->

I am messing around with React.js for the first time and cannot find a way to show or hide something on a page via click event. I am not loading any other library to the page, so I am looking for some native way using the React library. This is what I have so far. I would like to show the results div when the click event fires.

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

解决方案

React circa 2020

In the onClick callback, call the state hook's setter function to update the state and re-render:

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

const Results = () => (
  <div id="results" className="search-results">
    Some Results
  </div>
)

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

React circa 2014

The key is to update the state of the component in the click handler using setState. When the state changes get applied, the render method gets called again with the new state:

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                { this.state.showResults ? <Results /> : null }
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

ReactDOM.render( <Search /> , document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

这篇关于在 React 中显示或隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆