0

我有一个带有输入框的反应组件。我使用 componentDidUpdate 将焦点设置到输入框。但是我的测试因 typeError 而失败。以下是我的代码。帮助我通过测试。比你！！这是我的反应组件`

public inputBox: any;

    componentDidUpdate = () => {
        this.inputBox.focus();
      }

    <div>
                <input

                  ref = {element => this.inputBox = element}
                  />
    </div>

` 当组件更新时，测试失败。给我这个错误

TypeError：无法读取未定义的属性“焦点”

任何人都可以告诉我这里有什么问题吗？

4

1 回答 1

0

根据官方文档：

请注意，当引用的组件被卸载并且每当 ref 更改时，旧的 ref 将被调用，并使用 null 作为参数。这可以防止在存储实例的情况下发生内存泄漏，如第二个示例所示。另请注意，在此处的示例中使用内联函数表达式编写 ref 时，React 每次都会看到不同的函数对象，因此在每次更新时，在使用组件实例调用 ref 之前，都会立即使用 null 调用 ref。

我相信 ref 回调null在输入卸载时通过（这可能发生在您的测试结束并开始不同的测试时）。我认为当你想关注元素时，你只需要测试 null ，就像在文档中一样：

<TextInput ref={function(input) {
    if (input != null) {
        input.focus();
    }
}} />
于 2016-05-31T07:44:58.227 回答