Tôi đang học cách sử dụng react.js và có một số vấn đề để sử dụng trình xử lý sự kiện. Câu hỏi cuối cùng sẽ là: Có thể sử dụng hiển thị phía máy chủ và gửi trình xử lý sự kiện cho khách hàng một cách tự động không?React.js Hiển thị Serverside và Trình xử lý sự kiện
Dưới đây là ví dụ của tôi: Tôi có một index.jsx mà tôi làm cho phía máy chủ và gửi cho khách hàng
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>
)
}
});
Nhưng "Like Button" không có bất kỳ sự tương tác. Để làm cho nó làm một cái gì đó trên nhấp chuột tôi phải thêm phía khách hàng mã này.
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')
);
Tôi chỉ mới bắt đầu với react.js và có thể tôi chỉ thiếu một số khái niệm chính ở đây. Nhưng tại sao react.js không chỉ tạo mã (mà bây giờ tôi phải thêm thủ công cho máy khách) khi render phía máy chủ trang? Như thế này, tôi có mã dự phòng và nó cảm thấy như thế này sẽ là một mớ hỗn độn trong các ứng dụng lớn hơn. Ít nhất react.js đủ thông minh để không vẽ hai nút LikeButton nhưng để "liên kết" phía máy chủ được tạo ra với thành phần phía máy khách.
Điều này không liên quan đến câu hỏi của bạn nhưng tôi tin rằng bạn phải ràng buộc hàm handleClick trước khi chuyển nó lên onClick nếu không nó không có ngữ cảnh chính xác về điều này. (Nhưng tôi không chắc chắn lý do tại sao bạn sẽ không nhận được lỗi khi bạn nhấp vào nút vì nó sẽ ném một lỗi khi gọi this.setState) –
@ ktruong ràng buộc là không cần thiết khi sử dụng React.createClass. nó tự động liên kết. –
@ jeffpc1993 Ohh cảm ơn vì đã chỉ ra điều đó! –