显示或隐藏React中的元素

我第一次摆弄React.js，找不到一种方法通过单击事件在页面上显示或隐藏一些东西。我没有加载任何其他库到页面，所以我正在寻找一些使用React库的本地方式。这是我目前得到的。我想在点击事件触发时显示结果div。

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

当前回答

使用精简和简短的语法:

{ this.state.show && <MyCustomComponent /> }

2019-07-29 12:41:13

其他回答

一个使用Hooks在React中显示/隐藏元素的简单方法

const [showText, setShowText] = useState(false);

现在，让我们为渲染方法添加一些逻辑:

{showText && <div>This text will show!</div>}

And

onClick={() => setShowText(!showText)}

好工作。

2020-02-06 15:56:30

2019-09-19 08:11:13

如果你使用bootstrap 4，你可以用这种方式隐藏元素

className={this.state.hideElement ? "invisible" : "visible"}

2018-12-07 05:03:39

使用rc-if-else模块

npm install --save rc-if-else

import React from 'react';
import { If } from 'rc-if-else';

class App extends React.Component {
    render() {
        return (
            <If condition={this.props.showResult}>
                Some Results
            </If>
        );
    }
}

2019-02-27 11:19:09

React Hooks的简单隐藏/显示示例:(抱歉没有小提琴)

const Example = () => {

  const [show, setShow] = useState(false);

  return (
    <div>
      <p>Show state: {show}</p>
      {show ? (
        <p>You can see me!</p>
      ) : null}
      <button onClick={() => setShow(!show)}>
    </div>
  );

};

export default Example;

2020-01-15 18:53:11

显示或隐藏React中的元素

推荐文章

最新文章

标签