Javascript &引用；“未定义”不是对象；尝试使用引用访问同级组件的TextInput时

在

Parent

组件中，当在第一个

Child

组件的

TextInput

中按下submit按钮时，我试图聚焦第二个

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

从“React”导入React；
从“react native”导入{View，TextInput}；
导出默认类子类扩展React.Component{
焦点=ref=>{
ref.input.focus（）；
};
render（）{
返回(
{
this.focus（this.props.destinationRef）；
}}
ref={input=>{
这个输入=输入；
}}
/>
);
}
}

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

从“React”导入React；
从“/Child”导入子项；
从“react native”导入{View，StyleSheet}；
导出默认类父级扩展React.Component{
//componentDidMount（）{
//设置超时（（）=>{
//this.two.input.focus（）；
//     }, 3000);
//   }
render（）{
返回(
{
如果（！this.two）返回this.two；
}}
ref={input=>{
这个1=输入；
}}
/>
（this.two=输入）}/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“fff”，
对齐项目：“中心”，
为内容辩护：“中心”
}
});

---

请注意，当我取消注释

componendddimount

时，第二个

TextInput

在装载后三秒钟成功聚焦

我认为渲染更新中的问题。在第一次渲染时

destinationRef

未定义，父状态未更新或强制更新，因此道具也未更新

我试着优化你的代码。您可以使用箭头功能绑定此：

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

从“React”导入React；
从“/Child”导入子项；
从“react native”导入{View，StyleSheet}；
导出默认类父级扩展React.Component{
_makeFocus（）{
this.two.input.focus（）；
}
handleOnSubmit（）{
这个；
}
render（）{
返回(
{
这个1=输入；
}}
/>
（this.two=输入）}/>
);
}
}

我会稍微更改一下逻辑，因为我认为ref给了您一些问题

家长：

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

this.one=comp}/>
this.two=comp}/>

儿童：

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

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

导出默认类父类扩展React.Component{
建造师（道具）{
超级（道具）；
this.references={}；
}
onFocus=（ref）=>{
this.references[ref].focus（）；
}
render（）{
返回(
this.references['one']=input}
/>
this.references['two']=input}/>
);
}
}

以及您的孩子：

export default class Child extends React.Component {

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

导出默认类子组件{
render（）{
返回(
{
this.props.onFocus（this.props.destinationRef）；
}}
/>
);
}
}

不工作！对你有用吗？我不需要在

Child

组件中为

TextInput

定义

ref

标记吗？基本上，您将组件作为道具传递，因此不需要在子组件中使用ref。它有什么错误吗？它什么也没做。如果您在

onSubmitEditing

中省略

if

语句，那么它将抛出一个未定义的错误。对，我认为这是因为您试图从子级本身解决这个问题。查看我的编辑。它也不起作用。但幸运的是，我在

react redux