Question

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

public inputBox: any;

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

    <div>
                <input

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

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

TypeError：无法读取属性＆＃39;焦点＆＃39;未定义的

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

Answer 1

基于官方文档：

请注意，在卸载引用的组件时以及何时执行 ref更改，将使用null作为参数调用旧的ref。这个在存储实例的情况下防止内存泄漏，如第二个例子。另请注意，使用内联编写refs时这里的例子中的函数表达式，React看到了不同的东西函数对象每次更新时都会调用ref 在使用组件实例调用之前立即为null。

我相信当卸载输入时，ref回调会被传递null（这可能发生在你的测试结束和不同的测试开始时）。我想你只需要在想要聚焦元素时测试null，就像在文档中那样：

<TextInput ref={function(input) {
    if (input != null) {
        input.focus();
    }
}} />

使用焦点时的TypeError（）

1 个答案: