本文翻译自:Show or hide element in React
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. 我第一次弄乱React.js,找不到通过click事件在页面上显示或隐藏内容的方法。 I am not loading any other library to the page, so I am looking for some native way using the React library. 我没有在页面上加载任何其他库,因此我正在寻找使用React库的本机方法。 This is what I have so far. 到目前为止,这就是我所拥有的。 I would like to show the results div when the click event fires. 当点击事件触发时,我想显示结果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);
#1楼
参考:https://stackoom.com/question/1eoK2/在React中显示或隐藏元素
#2楼
You set a boolean value in the state (eg 'show)', and then do: 您在状态(例如“ show”)中设置一个布尔值,然后执行以下操作:
var style = {};
if (!this.state.show) {
style.display = 'none'
}
return <div style={style}>...</div>
#3楼
The key is to update the state of the component in the click handler using setState
. 关键是使用setState
更新点击处理程序中组件的状态。 When the state changes get applied, the render
method gets called again with the new state: 应用状态更改后,将使用新状态再次调用render
方法:
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>
#4楼
<style type="text/css">
.hidden { display:none; }
</style>
render: function() {
return (
<div className={this.props.shouldHide ? 'hidden' : ''}>
This will be hidden if you set <tt>props.shouldHide</tt>
to something truthy.
</div>
);
}
// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>
#5楼
with the newest version react 0.11 you can also just return null to have no content rendered. 使用最新版本的react 0.11,您也可以只返回null以不呈现任何内容。
#6楼
I created a small component that handles this for you: react-toggle-display 我创建了一个为您处理的小组件: react-toggle-display
It sets the style attribute to display: none !important
based on the hide
or show
props. 它将样式属性设置为display: none !important
基于hide
或show
道具。
Example usage: 用法示例:
var ToggleDisplay = require('react-toggle-display');
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} />
<ToggleDisplay show={this.state.showResults}>
<Results />
</ToggleDisplay>
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
React.renderComponent(<Search />, document.body);