React.js ile ilk kez uğraşıyorum ve tıklama olayı aracılığıyla bir sayfada bir şey göstermenin veya gizlemenin bir yolunu bulamıyorum. Sayfaya başka bir kütüphane yüklemiyorum, bu yüzden React kütüphanesini kullanarak yerel bir yol arıyorum. Şimdiye kadar yaptığım şey bu. Tıklama olayı gerçekleştiğinde sonuçlar div'ini göstermek istiyorum.
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);
Anahtar, setState
kullanarak tıklama işleyicisinde bileşenin durumunu güncellemektir. Durum değişiklikleri uygulandığında, render
yöntemi yeni durumla birlikte tekrar çağrılır:
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>
[JSFiddle][1]
<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>