Call React Component Method in Backbone Controller/class
I'm working on a project build with Backbone JS, we are using an architecture az describes We have Models, View, and Controllers that connect them.
We started creating some React components recently and I had a task to remake a Handlebars + JQ Form to React Form.
So I did it but now I have this problem: I need to have a way to get the state of the Form Components, which contains the data.
Until now in the handlebars + JQ form we had a
_getFormData() { return jq_formData; }
method that simply used JQ to extract the data, but since now the form is in React, it's not good to use JQ again.
The Form will be initialized with
in react:
class Form extends Component {
state = {}
getFormData() { return this.state; }
updateFormData (e) { this.setState({ [e.name]: e.value }) }
render() { return ( ... Child InputsFields update={this.updateFormData} ...) }
}
in backbone:
class View {
$el = $('#formContainer'),
// my idea is to have something like this
_getFormData(){
return Form.getFormData()
}
render () {
ReactDOM.render(<Form {...formData} />, this.$el[0])
}
}
So later I can use the View Instance in the Controller as this:
class Controler {
this.view = new View();
this.formData = this.view._getFormData(); // { name: 'tony', age: 34 }
}
I also taught about using
React.createRef()
but i'm not sure how this needs to be implemented with
ReactDOM.render( form, $el)
javascript reactjs backbone.js callback
asked Nov 21 '18 at 12:46
Георги Димитранов
203210
add a comment |
I'm working on a project build with Backbone JS, we are using an architecture az describes We have Models, View, and Controllers that connect them.
We started creating some React components recently and I had a task to remake a Handlebars + JQ Form to React Form.
So I did it but now I have this problem: I need to have a way to get the state of the Form Components, which contains the data.
Until now in the handlebars + JQ form we had a
_getFormData() { return jq_formData; }
method that simply used JQ to extract the data, but since now the form is in React, it's not good to use JQ again.
The Form will be initialized with
in react:
class Form extends Component {
state = {}
getFormData() { return this.state; }
updateFormData (e) { this.setState({ [e.name]: e.value }) }
render() { return ( ... Child InputsFields update={this.updateFormData} ...) }
}
in backbone:
class View {
$el = $('#formContainer'),
// my idea is to have something like this
_getFormData(){
return Form.getFormData()
}
render () {
ReactDOM.render(<Form {...formData} />, this.$el[0])
}
}
So later I can use the View Instance in the Controller as this:
class Controler {
this.view = new View();
this.formData = this.view._getFormData(); // { name: 'tony', age: 34 }
}
I also taught about using
React.createRef()
but i'm not sure how this needs to be implemented with
ReactDOM.render( form, $el)
javascript reactjs backbone.js callback
asked Nov 21 '18 at 12:46
Георги Димитранов
203210
add a comment |
I'm working on a project build with Backbone JS, we are using an architecture az describes We have Models, View, and Controllers that connect them.
We started creating some React components recently and I had a task to remake a Handlebars + JQ Form to React Form.
So I did it but now I have this problem: I need to have a way to get the state of the Form Components, which contains the data.
Until now in the handlebars + JQ form we had a
_getFormData() { return jq_formData; }
method that simply used JQ to extract the data, but since now the form is in React, it's not good to use JQ again.
The Form will be initialized with
in react:
class Form extends Component {
state = {}
getFormData() { return this.state; }
updateFormData (e) { this.setState({ [e.name]: e.value }) }
render() { return ( ... Child InputsFields update={this.updateFormData} ...) }
}
in backbone:
class View {
$el = $('#formContainer'),
// my idea is to have something like this
_getFormData(){
return Form.getFormData()
}
render () {
ReactDOM.render(<Form {...formData} />, this.$el[0])
}
}
So later I can use the View Instance in the Controller as this:
class Controler {
this.view = new View();
this.formData = this.view._getFormData(); // { name: 'tony', age: 34 }
}
I also taught about using
React.createRef()
but i'm not sure how this needs to be implemented with
ReactDOM.render( form, $el)
javascript reactjs backbone.js callback
asked Nov 21 '18 at 12:46
Георги Димитранов
203210
I'm working on a project build with Backbone JS, we are using an architecture az describes We have Models, View, and Controllers that connect them.
We started creating some React components recently and I had a task to remake a Handlebars + JQ Form to React Form.
So I did it but now I have this problem: I need to have a way to get the state of the Form Components, which contains the data.
Until now in the handlebars + JQ form we had a
_getFormData() { return jq_formData; }
method that simply used JQ to extract the data, but since now the form is in React, it's not good to use JQ again.
The Form will be initialized with
in react:
class Form extends Component {
state = {}
getFormData() { return this.state; }
updateFormData (e) { this.setState({ [e.name]: e.value }) }
render() { return ( ... Child InputsFields update={this.updateFormData} ...) }
}
in backbone:
class View {
$el = $('#formContainer'),
// my idea is to have something like this
_getFormData(){
return Form.getFormData()
}
render () {
ReactDOM.render(<Form {...formData} />, this.$el[0])
}
}
So later I can use the View Instance in the Controller as this:
class Controler {
this.view = new View();
this.formData = this.view._getFormData(); // { name: 'tony', age: 34 }
}
I also taught about using
React.createRef()
but i'm not sure how this needs to be implemented with
ReactDOM.render( form, $el)
javascript reactjs backbone.js callback
javascript reactjs backbone.js callback
asked Nov 21 '18 at 12:46
Георги Димитранов
203210
asked Nov 21 '18 at 12:46
Георги Димитранов
203210
asked Nov 21 '18 at 12:46
Георги Димитранов
203210
asked Nov 21 '18 at 12:46
Георги Димитранов
203210
asked Nov 21 '18 at 12:46
Георги Димитранов
203210
203210
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
There's no need for a ref, ReactDOM.render already returns a ref for rendered component:
this.instance = ReactDOM.render(<Form {...formData} />, this.$el[0]);
So it can be accessed later as this.instance.getFormData(). Also, component state is public and doesn't need getFormData getter, it can be retrieved with this.instance.state.
answered Nov 21 '18 at 12:56
estus
67.2k2198213
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412344%2fcall-react-component-method-in-backbone-controller-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
There's no need for a ref, ReactDOM.render already returns a ref for rendered component:
this.instance = ReactDOM.render(<Form {...formData} />, this.$el[0]);
So it can be accessed later as this.instance.getFormData(). Also, component state is public and doesn't need getFormData getter, it can be retrieved with this.instance.state.
answered Nov 21 '18 at 12:56
estus
67.2k2198213
add a comment |
There's no need for a ref, ReactDOM.render already returns a ref for rendered component:
this.instance = ReactDOM.render(<Form {...formData} />, this.$el[0]);
So it can be accessed later as this.instance.getFormData(). Also, component state is public and doesn't need getFormData getter, it can be retrieved with this.instance.state.
answered Nov 21 '18 at 12:56
estus
67.2k2198213
add a comment |
There's no need for a ref, ReactDOM.render already returns a ref for rendered component:
this.instance = ReactDOM.render(<Form {...formData} />, this.$el[0]);
So it can be accessed later as this.instance.getFormData(). Also, component state is public and doesn't need getFormData getter, it can be retrieved with this.instance.state.
answered Nov 21 '18 at 12:56
estus
67.2k2198213
There's no need for a ref, ReactDOM.render already returns a ref for rendered component:
this.instance = ReactDOM.render(<Form {...formData} />, this.$el[0]);
So it can be accessed later as this.instance.getFormData(). Also, component state is public and doesn't need getFormData getter, it can be retrieved with this.instance.state.
answered Nov 21 '18 at 12:56
estus
67.2k2198213
answered Nov 21 '18 at 12:56
estus
67.2k2198213
answered Nov 21 '18 at 12:56
estus
67.2k2198213
answered Nov 21 '18 at 12:56
estus
67.2k2198213
67.2k2198213
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412344%2fcall-react-component-method-in-backbone-controller-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
