尝试使用引用访问兄弟组件的TextInput时“未定义不是对象”

Question

在Parent组件中，我试图在第一Child组件的TextInput中按下“提交”按钮时将第二Child组件的TextInput聚焦，但出现此错误： 错误消息

Child.js

import React from "react";
import { View, TextInput} from "react-native";

export default class Child extends React.Component {

  focus = ref => {
    ref.input.focus();
  };

  render() {
    return (
      <View>
        <TextInput
          placeholder='enter text'
          onSubmitEditing={() => {
            this.focus(this.props.destinationRef);
          }}
          ref={input => {
            this.input = input;
          }}
        />
      </View>
    );
  }
}

Parent.js

import React from "react";
import Child from "./Child";
import { View, StyleSheet } from "react-native";

export default class Parent extends React.Component {
  //   componentDidMount() {
  //     setTimeout(() => {
  //       this.two.input.focus();
  //     }, 3000);
  //   }

  render() {
    return (
      <View style={styles.container}>
        <Child
          destinationRef={() => {
            if (!this.two) return this.two;
          }}
          ref={input => {
            this.one = input;
          }}
        />
        <Child ref={input => (this.two = input)} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

请注意，当我取消注释componendDidMount ，第二个TextInput在安装后三秒钟成功聚焦。

Answer 1

我认为渲染更新中的问题。 在第一个渲染时间中， destinationRef未定义，父状态未更新或强制更新，因此道具也未更新。

我尝试一点优化您的代码。 您可以使用箭头功能this进行绑定：

import React from "react";
import Child from "./Child";
import { View, StyleSheet } from "react-native";

export default class Parent extends React.Component {

_makeFocus(){
 this.two.input.focus();
}

handleOnSubmit(){
 this._makeFocus();
}

render() {
    return (
      <View style={styles.container}>
        <Child
          onSubmit={this.handleOnSubmit.bind(this)}
          ref={input => {
            this.one = input;
          }}
        />
        <Child ref={input => (this.two = input)} />
      </View>
    );
  }
}

Answer 2

我会稍微改变一下逻辑，因为我认为裁判给您带来了麻烦。

上级：

<View style={styles.container}>
        <Child next={this.two} ref={comp => this.one = comp}/>
        <Child next={this.one} ref={comp => this.two = comp}/>
      </View>

儿童：

<TextInput
          placeholder='enter text'
          onSubmitEditing={() => {
            if (this.props.next)
                this.props.next.focus();
          }}
        />

编辑：

我相信您的方法是正确的，我只会将父级更新为：

export default class Parent extends React.Component {

  constructor(props){
   super(props);
    this.references = {};
}

  onFocus = (ref) => {
     this.references[ref].focus();
}

  render() {
    return (
      <View style={styles.container}>
        <Child
          destinationRef={'two'}
          onFocus={this.onFocus}
          ref={input => this.references['one'] = input}
        />
        <Child ref={input => this.references['two'] = input} />
      </View>
    );
  }
}

和您的孩子：

export default class Child extends React.Component {

  render() {
    return (
      <View>
        <TextInput
          placeholder='enter text'
          onSubmitEditing={() => {
            this.props.onFocus(this.props.destinationRef);
          }}
        />
      </View>
    );
  }
}