snippetjavascriptreactMajor
How to access a DOM element in React? What is the equilvalent of document.getElementById() in React
Viewed 0 times
whatequilvalentaccessdomthegetelementbyidreactelementhowdocument
Problem
How do I select certain bars in react.js?
This is my code:
I want to use this React component:
I want to execute the handleClick10 function and perform the operation for my selected progressbar.
But the result I get is:
How do I select the certain Element in react.js?
This is my code:
var Progressbar = React.createClass({
getInitialState: function () {
return { completed: this.props.completed };
},
addPrecent: function (value) {
this.props.completed += value;
this.setState({ completed: this.props.completed });
},
render: function () {
var completed = this.props.completed;
if (completed < 0) { completed = 0 };
return (...);
}I want to use this React component:
var App = React.createClass({
getInitialState: function () {
return { baction: 'Progress1' };
},
handleChange: function (e) {
var value = e.target.value;
console.log(value);
this.setState({ baction: value });
},
handleClick10: function (e) {
console.log('You clicked: ', this.state.baction);
document.getElementById(this.state.baction).addPrecent(10);
},
render: function () {
return (
Progress Bars Demo
#Progress1
#Progress2
#Progress3
+25
-10
-25
)
}
});I want to execute the handleClick10 function and perform the operation for my selected progressbar.
But the result I get is:
You clicked: Progress1
TypeError: document.getElementById(...) is nullHow do I select the certain Element in react.js?
Solution
For getting the element in
But what I like to do more is to call the ref right inside the event
This is some good link to help you figure out.
react you need to use ref and inside the function you can use the ReactDOM.findDOMNode method.But what I like to do more is to call the ref right inside the event
this.myTextInput = ref} />This is some good link to help you figure out.
Code Snippets
<input type="text" ref={ref => this.myTextInput = ref} />Context
Stack Overflow Q#38093760, score: 59
Revisions (0)
No revisions yet.