无法在 react-native 中创建 ref答案

【问题标题】：unable to create ref in react-native无法在 react-native 中创建 ref
【发布时间】：2019-02-14 06:28:14
【问题描述】：

我想使用createRef() 将焦点放在下一个TextInput。我在createRef() 中遇到错误。我究竟做错了什么？提前致谢。

constructor(props) {
        super(props);
            this.r2Ref = React.createRef();
            this.r3Ref = React.createRef();
            this.r4Ref = React.createRef();
            this.r5Ref = React.createRef();
    }

render() {
        return (
            <View style={SetStyle.settingsCont}>
            <ScrollView>

                <View style={SetStyle.contRate}>

                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate1</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                            returnKeyType="next" onSubmitEditing={() => this.refs.r2Ref.focus()}></TextInput>
                    </View>
                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate2</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                            ref={r2Ref => this.r2Ref = r2Ref}
                            returnKeyType="next" onSubimitEditing={() => this.refs.r3Ref.focus()}></TextInput>
                    </View>
                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate3</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                        ref={r3Ref => this.r3Ref = r3Ref}
                        returnKeyType="next" onSubmitEditing={() => this.refs.r4Ref.focus()}></TextInput>
                    </View>
                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate4</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                            ref={r4Ref => this.r4Ref = r4Ref}
                            returnKeyType="next" onSubmitEditing={() => this.refs.r5Ref.focus()}></TextInput>
                    </View>
                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate5</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                            ref={r5Ref => this.r5Ref = r5Ref}></TextInput>
                    </View>
                </View>

            </ScrollView>
            </View>
        );
    }
}

我收到以下错误：

未定义不是对象（评估 this2.refs.r2Refs.focus）

【问题讨论】：

您能否添加您收到的错误消息
另外，你不应该在 state 中定义 refs。将它们定义为类变量。
我也定义了状态外的引用。但是我也遇到了错误
而不是 onSubmitEditing={() => this.refs.r2Ref.focus()} 。您是否尝试过如下 onSubmitEditing={() => this.r2Ref.current.focus()}

标签： reactjs react-native textinput

【解决方案1】：

这里的问题是您将Callback Refs 与createRef API 混合在一起。您也错误地访问它们。将它们定义为变量后，您需要改用所述变量。

你需要做的是这样的：

class Component extends React.Component {
  r2Ref = React.createRef();

  render() {
    return <Input name="r2" ref={this.r2Ref} />
  }
}

【讨论】：

【解决方案2】：

//Initialise  
this.fieldOne = React.createRef();


<TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               ref={this.fieldOne}
               onChangeText = {this.xxxxx} />

//To set focus
this.fieldOne.current.focus();

以上代码对我有用。希望，它会帮助某人

【讨论】：

【解决方案3】：

我通过从构造函数中删除 createRef() 并从 onSubmitEditing 中删除 ref 解决了这个问题

然后我是这样写的：

<TextInput ref={r2Ref => this.r2Ref = r2Ref}></TextInput>

并以如下方式使用它：

<TextInput onSubmitEditing={() => this.r2Ref.focus()}></TextInput>

【讨论】：

【解决方案4】：

如果您使用的是 Type Script。我用下面的代码实现了 OTP。

 import {
   SafeAreaView,
   StyleSheet,
   Text,
   View,
   TouchableOpacity,
   TextInput
 } from 'react-native';

class OtpScreen extends React.Component<IProps, State> {

  input1Ref: React.RefObject<TextInput>;
  input2Ref : React.RefObject<TextInput>;
  input3Ref : React.RefObject<TextInput>;
  input4Ref : React.RefObject<TextInput>;
  input5Ref : React.RefObject<TextInput>;
  input6Ref : React.RefObject<TextInput>;

  constructor(props: any) {
    super(props);
    this.input1Ref = React.createRef();
    this.input2Ref = React.createRef();
    this.input3Ref = React.createRef();
    this.input4Ref = React.createRef();
    this.input5Ref = React.createRef();
    this.input6Ref = React.createRef();
  }

  render() {
     return (
      <SafeAreaView style={Styles.container}>
        <View style={Styles.otpInputContainer}>
        <InputField
          nameRef={this.input1Ref}
          value={this.state.otpFirstNumber}
          onChangeText={(value: any) => {
            this.setState({ otpFirstNumber: value });
            this.input2Ref.current?.focus()
          }}
        />
        <InputField
          nameRef={this.input2Ref}
          value={this.state.otpSecondNumber}
          onChangeText={(value: any) => {
            this.setState({ otpSecondNumber: value });
            this.input3Ref.current?.focus()
          }}
        />
        <InputField
          nameRef={this.input3Ref}
          value={this.state.otpThirdNumber}
          onChangeText={(value: any) => {
            this.setState({ otpThirdNumber: value });
            this.input4Ref.current?.focus()
          }}            />
        <InputField
          nameRef={this.input4Ref}
          value={this.state.otpFourthNumber}
          onChangeText={(value: any) => {
            this.setState({ otpFourthNumber: value });
            this.input5Ref.current?.focus()
          }}          
            />
        <InputField
          nameRef={this.input5Ref}
          value={this.state.otpFifthNumber}
          onChangeText={(value: any) => {
            this.setState({ otpFifthNumber: value });
            this.input6Ref.current?.focus()
          }}               />
        <InputField
          nameRef={this.input6Ref}
          value={this.state.otpFifthNumber}
          onChangeText={(number: number) => this.inputNumber(number, 6)}
        />
       </View>
      </SafeAreaView>

【讨论】：