Question

我想使用let provider: Provider = Object.assign({}, this.providerFormGroup.value); console.log(provider.PostalAddressLine1); // Empty string: ""将重点放在下一个TextInput上。我在createRef()中遇到错误。我究竟做错了什么？预先感谢。

createRef()

我遇到以下错误：

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

Answer 1

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

您需要执行的操作如下：

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

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

Answer 2

我通过从构造函数中删除createRef（）并从ref中删除onSubmitEditing来解决了问题

然后我写了以下方法：

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

并按以下方式使用它：

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

Answer 3

//初始化
this.fieldOne = React.createRef（）;

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

//设置焦点 this.fieldOne.current.focus（）;

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

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>

无法在本机中创建引用

4 个答案: