javascript - ReactJS bind(this) - Stack Overflow

admin管理员组

文章数量:1344241

I'm following a tutorial to update states in ReactJS. I came across this line in the tutorial this.updateLanguage = this.updateLanguage.bind(this) and I don't understand what is going on. I understand the basics of this and bind, but I've never seen it done like this before. Can someone please explain? The full code:

var React = require('react');

class Popular extends React.Component {
    // constructor to set default state
    constructor (props) {
        super(props);
        this.state = {
            selectLanguage: 'All'
        };
        // I don't understand this line
        this.updateLanguage = this.updateLanguage.bind(this);
    }
    // updates state
    updateLanguage(lang) {
        this.setState(() => {
            return {
                selectLanguage: lang
            }
        });
    }
    render() {
        var languages = ['All', 'JavaScript', 'Ruby', 'Java', 'CSS', 'Python'];
        return (
            <ul className='languages'>
                {languages.map((lang) => {
                    return (
                        // adds listener to current state
                        <li style={lang === this.state.selectLanguage ? {color: '#d0021b'}: null}
                            onClick={this.updateLanguage.bind(null, lang)} 
                            key={lang}>
                            {lang}
                        </li>
                    )
                })}
            </ul>
        )
    }
} 

module.exports = Popular;

I'm following a tutorial to update states in ReactJS. I came across this line in the tutorial this.updateLanguage = this.updateLanguage.bind(this) and I don't understand what is going on. I understand the basics of this and bind, but I've never seen it done like this before. Can someone please explain? The full code:

var React = require('react');

class Popular extends React.Component {
    // constructor to set default state
    constructor (props) {
        super(props);
        this.state = {
            selectLanguage: 'All'
        };
        // I don't understand this line
        this.updateLanguage = this.updateLanguage.bind(this);
    }
    // updates state
    updateLanguage(lang) {
        this.setState(() => {
            return {
                selectLanguage: lang
            }
        });
    }
    render() {
        var languages = ['All', 'JavaScript', 'Ruby', 'Java', 'CSS', 'Python'];
        return (
            <ul className='languages'>
                {languages.map((lang) => {
                    return (
                        // adds listener to current state
                        <li style={lang === this.state.selectLanguage ? {color: '#d0021b'}: null}
                            onClick={this.updateLanguage.bind(null, lang)} 
                            key={lang}>
                            {lang}
                        </li>
                    )
                })}
            </ul>
        )
    }
} 

module.exports = Popular;

• javascript
• reactjs

Share Improve this question Follow asked Dec 24, 2017 at 3:00 DavidDavid 32333 gold badges88 silver badges2121 bronze badges 9

• 1 JavaScript classes do not bind methods to the instance of the class by default. so if you didn't have that line this.setState will fail – azium Commented Dec 24, 2017 at 3:03
• You didn't answer my question. I'm having trouble understanding what is happening with this.updateLanguage = this.updateLanguage.bind(this) – David Commented Dec 24, 2017 at 3:07
• Well I tried to answer your question. That line binds the instance of the class (this) to the method, so that inside the method updateLanguage, this will refer to the instance of the class – azium Commented Dec 24, 2017 at 3:12
• 2 It's due to the context where it is called in an event handler. The context there makes this context point at the element and the first argument is event Another way without using bind is onClick={()=> this.updateLanguage(lang)} – charlietfl Commented Dec 24, 2017 at 3:14
• @azium what you have stated is not true – charlietfl Commented Dec 24, 2017 at 3:18

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 10

DOM callbacks such as click events will set the this context to the DOM element itself, in this case the li. Try removing the part you don't understand and see what happens - you'll see something like this.setState is not defined, because that function isn't defined in the context of the li element (it's basically looking for li.setState).

What bind is doing on that line is ensuring that whenever that function gets called, it will get called with the this context we want, in this case the Popular ponent - e.g. Popular.setState.

These days it's getting more and more mon to see folks just using fat arrow syntax as a shorthand to preserve the this context - e.g. in this case onClick={ () => this.updateLanguage(lang) }.

(note for those concerned about performance: the fat arrow approach is cleaner but somewhat controversial since it's repeatedly declaring the function on every single render. That said, some folks claim there is minimal or no significant performance impact.)

If you not getting the bind(this) in constructor then its not but one of the way to avoid binding in render

Now why we need bind(this) in render let say we generally use onChange={this.handleChange.bind(this)}

These approaches assume that you’re declaring React ponents using ES6 classes. If you use an ES6 class, React no longer autobinds.

So, this is the One way to resolve this is to call bind in render.

本文标签： javascriptReactJS bind(this)Stack Overflow