无法在 react-native 中创建 ref

Question

我想使用 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>
        );
    }
}

我收到以下错误：

Undefined is not an object (evaluating this2.refs.r2Refs.focus)

Answer 1

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

你需要做的是：

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

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

Answer 2

我通过从构造函数中删除 createRef() 并从 onSubmitEditing

中删除 ref 解决了这个问题

然后我这样写：

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

并按以下方式使用它：

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

Answer 3

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

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

Answer 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>

无法在 react-native 中创建 ref

unable to create ref in react-native

textinput

reactjs

react-native