React, setting onClick in html via dangerouslySetInnerHTML
up vote
0
down vote
favorite
I have a txt component that renders via dangerouslySetInnerHTML
It has this line:
lines[i] = lines[i].replace(capoRegex, "<div class='capo' onClick={this.toggleTranspose()}>$1</div>");
But when I click the element, I get this error:
TypeError: this.toggleTranspose is not a function
How do I call my component's function from dangerouslySetInnerHTML ?
reactjs
asked Nov 10 at 23:38
Mirror318
4,82922941
add a comment |
up vote
0
down vote
favorite
I have a txt component that renders via dangerouslySetInnerHTML
It has this line:
lines[i] = lines[i].replace(capoRegex, "<div class='capo' onClick={this.toggleTranspose()}>$1</div>");
But when I click the element, I get this error:
TypeError: this.toggleTranspose is not a function
How do I call my component's function from dangerouslySetInnerHTML ?
reactjs
asked Nov 10 at 23:38
Mirror318
4,82922941
first of all, do you meanonClick={this.toggleTranspose}rather thanonClick={this.toggleTranspose()}? (I assume toggleTranspose is not returning your onclick handler)
– noahnu
Nov 10 at 23:59
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a txt component that renders via dangerouslySetInnerHTML
It has this line:
lines[i] = lines[i].replace(capoRegex, "<div class='capo' onClick={this.toggleTranspose()}>$1</div>");
But when I click the element, I get this error:
TypeError: this.toggleTranspose is not a function
How do I call my component's function from dangerouslySetInnerHTML ?
reactjs
asked Nov 10 at 23:38
Mirror318
4,82922941
I have a txt component that renders via dangerouslySetInnerHTML
It has this line:
lines[i] = lines[i].replace(capoRegex, "<div class='capo' onClick={this.toggleTranspose()}>$1</div>");
But when I click the element, I get this error:
TypeError: this.toggleTranspose is not a function
How do I call my component's function from dangerouslySetInnerHTML ?
reactjs
reactjs
asked Nov 10 at 23:38
Mirror318
4,82922941
asked Nov 10 at 23:38
Mirror318
4,82922941
asked Nov 10 at 23:38
Mirror318
4,82922941
asked Nov 10 at 23:38
Mirror318
4,82922941
asked Nov 10 at 23:38
Mirror318
4,82922941
4,82922941
first of all, do you meanonClick={this.toggleTranspose}rather thanonClick={this.toggleTranspose()}? (I assume toggleTranspose is not returning your onclick handler)
– noahnu
Nov 10 at 23:59
add a comment |
first of all, do you meanonClick={this.toggleTranspose}rather thanonClick={this.toggleTranspose()}? (I assume toggleTranspose is not returning your onclick handler)
– noahnu
Nov 10 at 23:59
first of all, do you mean
onClick={this.toggleTranspose} rather than onClick={this.toggleTranspose()}? (I assume toggleTranspose is not returning your onclick handler)– noahnu
Nov 10 at 23:59
first of all, do you mean
onClick={this.toggleTranspose} rather than onClick={this.toggleTranspose()}? (I assume toggleTranspose is not returning your onclick handler)– noahnu
Nov 10 at 23:59
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
You can add it to the parent lifecycle method
componentDidMount: function() {
$('.capo').click(function(e){
...
})
}
have a look at this https://www.freecodecamp.org/forum/t/react-component-onclick/162316/3
answered Nov 10 at 23:43
victor zadorozhnyy
251412
add a comment |
up vote
0
down vote
@victor zadorozhnyy's answer was the right direction. I didn't have jquery, and I needed to access the components setState method, so this was my final code:
var component = this;
document.getElementById('capo').addEventListener('click', function(e) {
transpose = parseInt(e.target.dataset["capo"]);
component.setState({
transpose: transpose
});
}
answered Nov 11 at 4:21
Mirror318
4,82922941
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You can add it to the parent lifecycle method
componentDidMount: function() {
$('.capo').click(function(e){
...
})
}
have a look at this https://www.freecodecamp.org/forum/t/react-component-onclick/162316/3
answered Nov 10 at 23:43
victor zadorozhnyy
251412
add a comment |
up vote
1
down vote
accepted
You can add it to the parent lifecycle method
componentDidMount: function() {
$('.capo').click(function(e){
...
})
}
have a look at this https://www.freecodecamp.org/forum/t/react-component-onclick/162316/3
answered Nov 10 at 23:43
victor zadorozhnyy
251412
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You can add it to the parent lifecycle method
componentDidMount: function() {
$('.capo').click(function(e){
...
})
}
have a look at this https://www.freecodecamp.org/forum/t/react-component-onclick/162316/3
answered Nov 10 at 23:43
victor zadorozhnyy
251412
You can add it to the parent lifecycle method
componentDidMount: function() {
$('.capo').click(function(e){
...
})
}
have a look at this https://www.freecodecamp.org/forum/t/react-component-onclick/162316/3
answered Nov 10 at 23:43
victor zadorozhnyy
251412
edited Nov 10 at 23:50
answered Nov 10 at 23:43
victor zadorozhnyy
251412
answered Nov 10 at 23:43
victor zadorozhnyy
251412
answered Nov 10 at 23:43
victor zadorozhnyy
251412
251412
add a comment |
add a comment |
up vote
0
down vote
@victor zadorozhnyy's answer was the right direction. I didn't have jquery, and I needed to access the components setState method, so this was my final code:
var component = this;
document.getElementById('capo').addEventListener('click', function(e) {
transpose = parseInt(e.target.dataset["capo"]);
component.setState({
transpose: transpose
});
}
answered Nov 11 at 4:21
Mirror318
4,82922941
add a comment |
up vote
0
down vote
@victor zadorozhnyy's answer was the right direction. I didn't have jquery, and I needed to access the components setState method, so this was my final code:
var component = this;
document.getElementById('capo').addEventListener('click', function(e) {
transpose = parseInt(e.target.dataset["capo"]);
component.setState({
transpose: transpose
});
}
answered Nov 11 at 4:21
Mirror318
4,82922941
add a comment |
up vote
0
down vote
up vote
0
down vote
@victor zadorozhnyy's answer was the right direction. I didn't have jquery, and I needed to access the components setState method, so this was my final code:
var component = this;
document.getElementById('capo').addEventListener('click', function(e) {
transpose = parseInt(e.target.dataset["capo"]);
component.setState({
transpose: transpose
});
}
answered Nov 11 at 4:21
Mirror318
4,82922941
@victor zadorozhnyy's answer was the right direction. I didn't have jquery, and I needed to access the components setState method, so this was my final code:
var component = this;
document.getElementById('capo').addEventListener('click', function(e) {
transpose = parseInt(e.target.dataset["capo"]);
component.setState({
transpose: transpose
});
}
answered Nov 11 at 4:21
Mirror318
4,82922941
answered Nov 11 at 4:21
Mirror318
4,82922941
answered Nov 11 at 4:21
Mirror318
4,82922941
answered Nov 11 at 4:21
Mirror318
4,82922941
4,82922941
add a comment |
add a comment |
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%2f53244493%2freact-setting-onclick-in-html-via-dangerouslysetinnerhtml%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
first of all, do you mean
onClick={this.toggleTranspose}rather thanonClick={this.toggleTranspose()}? (I assume toggleTranspose is not returning your onclick handler)– noahnu
Nov 10 at 23:59