Question

我第一次遇到React.js的问题，找不到通过单击显示或隐藏页面上某些内容的方法。

我没有在页面上加载任何其他库，所以我正在寻找使用React库的本机方法。到目前为止，这就是我所拥有的。当点击事件触发时，我想显示结果div。

任何帮助表示赞赏

var Detail = 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 DataRes = React.createClass({
    render: function () {
        return (
            <div id="data" className="search-results">
                Some Data
            </div>
        );
    }
});

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

Answer 1

您可以尝试以下代码：

在此示例中，您可以尝试单击按钮并向您显示组件，然后再次单击它将隐藏的按钮，基本上是其切换按钮，

希望这对您有用。

var Detail = React.createClass({
    getInitialState: function() {
        return { show: false };
    },
    onClick: function() {
        this.setState({ show: !this.state.show }); // Here is the toggle
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                { this.state.show ? <DataRes /> : null } // basically this line will show your datas component view when you click on view
            </div>
        );
    }
});

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

ReactDOM.render( <Detail /> , 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">
  <!--Your component will be render. -->
</div>

react-隐藏/显示DOM-使用react库

1 个答案: