HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptreactMajor

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
whatequilvalentaccessdomthegetelementbyidreactelementhowdocument

Problem

How do I select certain bars 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 null


How do I select the certain Element in react.js?

Solution

For getting the element in 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.