Question

我想我快要疯了。我有2个几乎完全相同的代码段，其中1个关键字此关键字引用了正确的作用域，而另一种则没有。我已经盯着它看了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参数。为什么会发生这种情况，我该如何解决？

Answer 1

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

因此，您应该设置一个变量来记住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>
    )

}

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

1 个答案: