Show یا Hide کردن عنصر در React
من تازه شروع به یادگیری React کردم و دنبال راهی هستم که بتونم یک عنصر روی صفحه را show یا hide کنم. می خوام زمانی که کلیک کردم، 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);
ثبت نظر
باید در اداره کننده رویداد کلیک، state کامپوننت را با استفاده از متد setState تغییر دهید. زمانی که تغییری در state اعمال شود، متد رندر با 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'));
پاسخ شماپاسخ شما با موفقیت ثبت شد.پاسخی وارد نشده است.