浏览器中的 JavaScript 调解器找不到实例变量

正在处理HTML/JS调解器，该介质在用户输入文本到字段时过滤data_model。已经使用了窗口。>

console.log(this.text_field)

setup_list_view((中的工作正常，似乎是因为它在构造函数范围内。如下所示，在构造函数之外运行它：

Cannot set property 'innerHTML' of undefined at HTMLInputElement.handle_text_field_changed

...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function init() {
            var text_field = document.getElementById("text-field");
            var list_view = document.getElementById("list-view")
            form_mediator = new FormMediator(text_field, list_view)
        }
        class FormMediator {
            constructor(text_field, list_view) {
                this.setup_text_field(text_field)
                this.setup_list_view(list_view)
            }
            setup_text_field(text_field) {
                this.text_field = text_field;
                this.text_field.onchange = this.handle_text_field_changed
            }
            setup_list_view(list_view) {
                this.data_model = ['England', 'Estonia', 'France', 'Germany']
                this.list_view = list_view
                this.list_view.innerHTML = this.data_model
            }
            does_string_start_with_text_field_text(text) {
                return false;
                return text.startsWith('E')
            }
            handle_text_field_changed(){
                this.list_view.innerHTML = 'new content' //this.data_model.filter(this.does_string_start_with_text_field_text)
            }
        }

        window.onload = init
    </script>
    <input id="text-field"><button>Search</button>
    <span id="list-view"></span>
</body>
</html>

任何帮助。

代码中的问题发生在此行中：

this.text_field.onchange = this.handle_text_field_changed

默认情况下，如果分配给变量或其他对象的属性，则不会携带其原始绑定上下文。您需要首先绑定此句柄_text_field_changed方法，以下方式：

this.text_field.onchange = this.handle_text_field_changed.bind(this)

相关内容

最新更新

热门标签：