无法在反应中创建参考

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

我会遇到以下错误：

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

Answer 1

这里的问题是，您将回调参考与Createref API混合在一起。另外，您正在访问他们。将它们定义为变量后，您需要使用上述变量。

您需要做的是：

class Component extends React.Component {
  r2Ref = React.createRef();
  render() {
    return <Input name="r2" ref={this.r2Ref} />
  }
}

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

上面的代码对我有用。希望，它会hep某人

Answer 3

我通过从构造函数中删除createref（）并从 onSubmitEditing

中删除 ref解决了问题

然后我写下了以下方式：

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

并使用以下方式使用：

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

Answer 4

如果您使用的是类型脚本。我已经用以下代码实现了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>