下次按下时反应本机焦点文本输入

Question

注意：我知道有很多类似的问题，我已经尝试对它们实施答案，但没有成功。

\n\n

在我的 React Native 应用程序中，我有一个接受有限数量的自定义文本输入组件的表单。我正在尝试找到一种解决方案，当用户按下返回按钮时移动到下一个输入。\xe2\x80\xa8\xe2\x80\xa8I\xe2\x80\x99已经尝试了一些软件包，但似乎没有一个工作得很好与安卓。我\xe2\x80\x99ve也尝试过使用refs，但can\xe2\x80\x99t似乎很幸运（注意表单是一个功能组件）。当我尝试在浮动标签组件内访问它时，它不断返回未定义。

\n\n

自定义组件：

\n\n

<FloatLabelTextInput\n          value={billingFirstName}\n          onChangeText={newText => setBillingFirstName(newText)}\n          autoCorrect={false}\n          style={globalStyles.textInput}\n          label="Billing First Name"\n        />\xe2\x80\xa8\n

\n\n

\xe2\x80\xa8浮动标签文本输入组件呈现文本输入（带有基于材质的浮动标签）。

\n\n

\xe2\x80\xa8import React, { Component } from \'react\';\nimport {\n  Alert,\n  Button,\n  View,\n  TextInput,\n  Animated,\n  Image,\n  TouchableOpacity,\n} from \'react-native\';\nimport colors from \'../utils/colors\';\n\nexport default class FloatLabelTextInput extends Component<Props> {\n  static defaultProps = {\n    editable: true,\n    showHelp: false,\n  };\n\n  state = {\n    isFocused: false,\n  };\n\n\n\n  componentDidUpdate() {\n    Animated.timing(this.animatedIsFocused, {\n      toValue: this.state.isFocused || this.props.value !== \'\' ? 1 : 0,\n      duration: 200,\n    }).start();\n  }\n\n  handleFocus = () => {\n    this.setState({ isFocused: true });\n    if (this.props.onFocus) {\n      this.props.onFocus();\n    }\n  };\n\n  handleBlur = () => this.setState({ isFocused: false });\n\n  focus() {\n    this.ref.focus();\n  }\n\n  blur() {\n    this.ref.blur();\n  }\n\n  updateCursorPosition() {\n    this.ref.setNativeProps({\n      selection: { start: 0, end: 0 },\n    });\n    this.ref.setNativeProps({\n      selection: {\n        start: this.props.value.length,\n        end: this.props.value.length,\n      },\n    });\n  }\n\n  showAlert = helpText => {\n    Alert.alert(helpText.title, helpText.body, [{ text: helpText.button }], {\n      cancelable: helpText.cancelable,\n    });\n  };\n\n  render() {\n    const { label, style, isShowingRightAccessory, ...props } = this.props;\n    const labelStyle = {\n      position: \'absolute\',\n      left: 0,\n      top: this.animatedIsFocused.interpolate({\n        inputRange: [0, 0.9],\n        outputRange: [15, 0],\n      }),\n      fontSize: this.animatedIsFocused.interpolate({\n        inputRange: [0, 1],\n        outputRange: [18, 14],\n      }),\n    };\n    return (\n      <View\n        style={[\n          this.props.style,\n          { paddingTop: 18, opacity: this.props.editable ? 1 : 0.5 },\n        ]}>\n        <Animated.Text\n          style={[\n            labelStyle,\n            {\n              color: colors.lightBlue,\n            },\n          ]}\n          allowFontScaling={false}>\n          {label}\n        </Animated.Text>\n        <TextInput\n          {...props}\n          caretHidden={false}\n          underlineColorAndroid="transparent"\n          ref={c => {\n            this.ref = c;\n          }}\n          selectionColor={colors.lightBlue}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          blurOnSubmit\n          allowFontScaling={false}\n        />\n        {this.props.showHelp && (\n          <TouchableOpacity\n            style={{\n              marginTop: 20,\n              position: \'absolute\',\n              alignSelf: \'flex-end\',\n            }}\n            onPress={() => this.showAlert(this.props.helpText)}>\n            <Image\n              style={{\n                height: 15,\n                width: 15,\n              }}\n              source={require(\'../../assets/icon_Tooltip.png\')}\n            />\n          </TouchableOpacity>\n        )}\n\n        <View style={{ height: 1, width: \'100%\', backgroundColor: \'white\' }} />\n      </View>\n    );\n  }\n}\n

\n\n

\xe2\x80\xa8\n我的猜测是我想实现一个基于引用的解决方案，并且我正在寻找有关如何使用自定义文本组件来做到这一点的建议

\n

Answer 1

好吧，我可以通过以下方式使用 useRef 来实现这一目标：

const billingFirstNameInput = useRef(null);

<FloatLabelTextInput
          value={billingFirstName}
          onChangeText={newText => setBillingFirstName(newText)}
          autoCorrect={false}
          style={globalStyles.textInput}
          label="Billing First Name"
          ref={billingFirstNameInput}
          onSubmitEditing={() => {
            billingLastNameInput.current.focus()
          }}
        />