javascript - 为什么 'this' 突然超出了我的范围？

Question

我觉得我快疯了。我有 2 段几乎相同的代码，其中 1 段关键字 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 是行 this.setState({selected:e});。此代码有效。 “this”在正确的范围内被调用。我需要重构代码，所以我在更高级别的组件中编写了另一个函数并将其绑定(bind)到该类。然后我开始将上面的内容更改为以下内容:

 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 参数。为什么会发生这种情况，我该如何解决？

Answer 1

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

所以你应该设置一个变量来记住renderField中的this。

这是一个带注释的例子。

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>
    )

}