代码之家 › 专栏 › 技术社区 › KAT

为什么“这个”突然超出了我的范围?

scope ecmascript-6 javascript

KAT · 技术社区 · 6 年前

我想我快疯了。我有两段几乎完全相同的代码,其中一段代码中的关键字this引用了正确的范围,而在另一段代码中则没有。我已经盯着它看了3个小时,需要其他的眼睛。

第一个功能是:

 renderField({input, options, label, name, multi}){
        let list = options.map(category=>{
            return {value:category.name, label:category.name}
        });

        return(
            <div>
                <label>{label}</label>
                <Select
                    value={this.state.selected}
                    multi={multi}
                    name={name}
                    className="basic-multi-select"
                    classNamePrefix="select"
                    options={list}
                    onChange={(e)=>{
                        this.setState({selected:e});
                        input.onChange(e);
                    }}
                />
            </div>
        )
    }

我指的是这条线 this.setState({selected:e}); . 这个代码有效。在正确的范围内调用“this”。我需要重构代码,所以我在一个更高级别的组件中编写了另一个函数并将其绑定到该类。我接着将上述内容改为:

 renderField({defaultValue, input, options, label, name, multi, initialValues}){
        let list = options.map(category=>{
            return {value:category.name, label:category.name}
        });
        return(
            <div>
                <label>{label}</label>
                <Select
                    value={this.props.selected}
                    multi={multi}
                    name={name}
                    className="basic-multi-select"
                    classNamePrefix="select"
                    options={list}
                    onChange={(e)=>{
                            this.props.changeState(this.props.state_handler, e);
                            input.onChange(e);
                        }
                    }
                />
            </div>
        )

    }

突然,这不再是范围,现在指向 e 我要传进去的论点。为什么会发生这种情况,我该如何解决?

1 回复 | 直到 6 年前

Terry Wei 6 年前

在事件处理程序中, this 表示事件目标。

所以你应该设置一个变量来记住 这 在里面 renderField .

下面是一个带有注释的示例。

renderField({defaultValue, input, options, label, name, multi, initialValues}){
    let list = options.map(category=>{
        return {value:category.name, label:category.name}
    });
    // set that to current this
    let that = this;
    return(
        <div>
            <label>{label}</label>
            <Select
                value={this.props.selected}
                multi={multi}
                name={name}
                className="basic-multi-select"
                classNamePrefix="select"
                options={list}
                onChange={(e)=>{
                        // this.props.changeState(this.props.state_handler, e);
                        // use that instead
                        that.props.changeState(that.props.state_handler, e);
                        input.onChange(e);
                    }
                }
            />
        </div>
    )

}