小编典典

ReactJS绑定(this)

reactjs

我正在遵循一个教程来更新ReactJS中的状态。我在本教程中碰到了这一行,但this.updateLanguage = this.updateLanguage.bind(this)我不知道发生了什么。我了解此基本知识并进行绑定,但我从未见过如此做过。有人可以解释一下吗?完整代码:

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;

阅读 242

收藏
2020-07-22

共1个答案

小编典典

诸如click事件之类的DOM回调会将this上下文设置为DOM元素本身,在本例中为li。尝试删除您不了解的部分,然后看看会发生什么-
您会看到类似的内容this.setState is not defined,因为该功能未在li元素的上下文中定义(基本上是在寻找li.setState)。

什么bind是在该行做的是确保每当函数被调用,它会被称为与this我们想要的背景下,在这种情况下,Popular组件-
例如Popular.setState

如今,越来越多的人看到人们仅使用fat arrow语法作为保存this上下文的简写-例如,在这种情况下onClick={ () => this.updateLanguage(lang) }

(对于那些关心性能的人请注意:粗箭头方法更干净一些,但有争议,因为它在每个渲染器上反复声明该功能。也就是说,有些人声称对性能的影响很小或没有。)

2020-07-22