反应：丢失参考值答案

【问题标题】：React: Losing ref values反应：丢失参考值
【发布时间】：2016-11-19 00:06:31
【问题描述】：

我正在使用两个组件，并且我正在使用这种模式：子组件应尽可能保持隔离 - 它正在处理自己的验证错误。父组件应检查子组件之间存在依赖关系的错误。所以，就我而言：password 字段和password confirmation 字段。

这是我的代码：

a) 注册（父级）

设置初始状态。

 constructor() {
     super();

     this.state = {
         isPasswordMatching: false
     };
 }

在render() 方法中，我正在输出我的子组件。通过名为callback 的道具，我通过绑定父级的this 来传播方法isPasswordMatching()。目标是可以在子组件中调用方法。

<TextInput
    id={'password'}
    ref={(ref) => this.password = ref}
    callback={this.isPasswordMatching.bind(this)}
    // some other unimportant props
/>

<TextInput
    id={'passwordConfirm'}
    ref={(ref) => this.passwordConfirm = ref}
    ...

isPasswordMatching() 方法是检查密码是否匹配（通过引用 this.password 和 this.passwordConfirm）然后更新状态。请注意，此方法在子进程内部调用（密码或密码确认）。

isPasswordMatching() {
    this.setState({
        isPasswordMatching: this.password.state.value === this.passwordConfirm.state.value
    });
}

b) 文本输入（子）

设置初始状态。

constructor() {
    super();

    this.state = {
        value: '',
        isValid: false
    };
}

模糊验证已完成并更新状态。

onBlur(event) {

    // doing validation and preparing error messages

    this.setState({
        value: value,
        isValid: this.error === null
    });
}

最新的。回调属性被调用。

componentDidUpdate(prevProps) {
    if (prevProps.id === 'password' || prevProps.id === 'passwordConfirm') {
        prevProps.callback();
    }
}

问题

不知何故，我的裁判丢失了。场景：

父组件是渲染器
子组件被渲染
我正在输入一个输入字段并退出（这会调用 onBlur() 方法）- 状态得到更新，子组件被渲染
componentDidUpdate() 被调用，prevProp.callback() 也被调用
当使用isPasswordMatching() 方法时，我输出this.password 和this.passwordConfirm - 它们是具有预期参考值的对象。更新父组件的状态 - 组件被渲染。
然后再次渲染所有子级，更新组件，调用回调，但这次 this.password 和 this.passwordConfirm 是 null。

我不知道为什么引用会丢失。我应该做一些不同的事情吗？提前谢谢你。

【问题讨论】：

标签： reactjs refs

【解决方案1】：

请参阅react documentation here，其中包含重要警告并建议何时使用或不使用 refs。

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

【讨论】：

感谢您的努力。哦，所以这是我的问题。你有什么指示我应该如何解决这个问题？我应该使用上下文吗？
谢谢。这似乎在文档更新中丢失了。
如果您有条件地渲染ref 元素，您将需要使用style={{ display: 'none' }} 而不是简单地不渲染它，否则不会创建引用。

【解决方案2】：

我不确定这是否回答了@be-codified 的问题，但我发现这遇到了类似的问题。就我而言，事实证明这是由于使用了功能组件。

https://reactjs.org/docs/refs-and-the-dom.html#refs-and-functional-components

引用和功能组件你不能在功能组件上使用 ref 属性，因为它们没有如果您需要对组件的引用，则应该将组件转换为类，就像您需要生命周期方法或状态时所做的那样。
但是，只要您引用 DOM 元素或类组件，您就可以在功能组件中使用 ref 属性

该文档解释了如果您可以控制您尝试呈现的组件，您应该如何解决该问题。

但在我的例子中，该组件来自第 3 方库。所以，简单地包装组件就可以了。

工作

<div ref={element => this.elementName = element}>
    <FunctionalComponent />
</div>

不工作
将 this.elementName 设置为 null

<FunctionalComponent ref={element => this.elementName = element} />

希望这可以帮助任何人像我一样找到这个问题。

【讨论】：