Sto imparando a utilizzare react.js e ho alcuni problemi per utilizzare i gestori di eventi. La domanda finale sarebbe: è possibile utilizzare il rendering lato server e inviare automaticamente i gestori di eventi al client?React.js Server di rendering e gestori di eventi
Ecco il mio esempio: Ho un index.jsx che io rendo lato server e inviare al client
var React = require("react");
var DefaultLayout = require("./layout/default");
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
var IndexComponent = React.createClass({
render: function(){
return (
<DefaultLayout title={this.props.name}>
<div>
<h1>React Test</h1>
</div>
<div id="testButton">
<LikeButton/>
</div>
<script type="text/babel" src="/js/react.js"></script>
</DefaultLayout>
)
}
});
Ma il "Like Button" non ha alcuna interazione. Per farlo fare qualcosa al clic devo aggiungere questo lato client del codice.
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('testButton')
);
Ho iniziato solo con react.js e forse mi manca solo qualche concetto importante qui. Ma perché react.js non solo crea il codice (che ora devo aggiungere manualmente al client) durante il rendering del lato server di pagine? In questo modo, ho un codice ridondante e mi sembra che questo sarà un disastro in applicazioni più grandi. Almeno react.js è abbastanza intelligente da non disegnare due LikeButtons ma per "legare" il lato server creato al componente lato client.
Questo non è correlato alla tua domanda, ma credo che si debba associare la funzione handleClick prima di passarla sul onClick altrimenti non ha il contesto corretto di ciò. (Ma non sono sicuro del motivo per cui non si otterrebbe un errore quando si fa clic sul pulsante perché dovrebbe generare un errore quando si chiama this.setState) –
l'associazione @ktruong non è richiesta quando si utilizza React.createClass. si lega automaticamente. –
@ jeffpc1993 Ohh grazie per avermelo fatto notare! –