reactjs - react : Losing ref values

Question

我正在使用两个组件，并且我正在使用这种模式:子组件应尽可能保持隔离 - 它正在处理自己的验证错误。父组件应该检查​​子组件之间存在依赖关系的错误。因此，就我而言:密码字段和密码确认字段。

这是我的代码:

a) 注册(家长)

设置初始状态。

 constructor() {
     super();

     this.state = {
         isPasswordMatching: false
     };
 }

在 render() 方法中，我正在输出我的子组件。通过名为 callback 的 prop，我通过绑定(bind)父级的 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) TextInput(子)

设置初始状态。

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();
    }
}

问题

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

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

我不知道为什么引用文献有点丢失。我应该做一些不同的事情吗？预先感谢您。

Answer 1

请参阅react documentation here ，带有重要警告并建议何时使用或不使用引用。

Note that when the referenced component is unmounted and whenever the ref changes, the old ref will be called with null as an argument. This prevents memory leaks in the case that the instance is stored, as in the second example. Also note that when writing refs with inline function expressions as in the examples here, React sees a different function object each time so on every update, ref will be called with null immediately before it's called with the component instance.