Undefined 不是 TextInput onSubmitEditing Focus 的对象

Question

当用户按下键盘上的下一个按钮时，我试图关注下一个字段。但我不断收到undefined is not an object (_this2.passwordInput.focus).

我指的是this 问题来实现它。但它没有用。

我有 CustomInputText，这就是我实现它的方式。

<CustomEditText
    labelText="Email or Phone Number"
    returnKeyType = "next"
    onSubmitEditing={ () => this.passwordInput.focus() }
    onChangeText={text => this.setState({ username: text })}
    blurOnSubmit={false}
    />

<CustomEditText
    ref={(ref) => { this.passwordInput = ref; }}
    labelText="Password"
    secureText={true}
    onChangeText={text => this.setState({ password: text })}
    />

CustomEditText.js

const CustomEditText = props => {
  return (
    <View style={styles.container}>
      <SmallText fontFamily="semi-bold" color={props.darkText? Colors.TEXT_PRIMARY_COLOR : "#fff"}>
        {props.labelText}
      </SmallText>

      <TextInput
        ref = {props.ref}
        blurOnSubmit= {props.blurOnSubmit}
        onSubmitEditing = {props.onSubmitEditing}
        returnKeyType = {props.returnKeyType}
        onFocus = {props.onFocus}
        autoCapitalize="none"
        editable={props.editable}
        onChangeText={props.onChangeText}
        keyboardType={props.keyboardType}
        {...props}
        value={props.value}
      />
      {props.secondaryLabelText ? (
        <ExtraSmallText
          fontFamily="semi-bold"
          color={props.darkText? Colors.TEXT_PRIMARY_COLOR : "#fff"}
          style={styles.secondaryLabelStyle}
        >
          {props.secondaryLabelText}
        </ExtraSmallText>
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 5
  },
  textInputStyle: {
    backgroundColor: "#fff",
    height: 45,
    borderRadius: 5,
    borderWidth: 1,
    padding: 5,
    marginTop: 5,
    color:"#000"
  },
  secondaryLabelStyle: {
    marginTop: 5
  }
});

CustomEditText.propTypes = {
  labelText: propTypes.string.isRequired,
  secondaryLabelText: propTypes.string,
  keyboardType: propTypes.string,
  secureText: propTypes.bool,
  placeholderText: propTypes.string,
  placeholderTextColor: propTypes.bool,
  onChangeText: propTypes.func,
  darkText: propTypes.bool,
  editable: propTypes.bool,
  onFocus: propTypes.func,
  pointerEvents: propTypes.string,
  returnKeyType : propTypes.string,
  onSubmitEditing: propTypes.func,
  ref: propTypes.func,
  blurOnSubmit: propTypes.bool

};

export default CustomEditText;

Answer 1

使用以下代码更新您的 CustomTextInput.js 文件

<TextInput
        ref={input => props.inputRef && props.inputRef(input)}
        blurOnSubmit= {props.blurOnSubmit}
        onSubmitEditing = {props.onSubmitEditing}
        returnKeyType = {props.returnKeyType}
        onFocus = {props.onFocus}
        autoCapitalize="none"
        editable={props.editable}
        onChangeText={props.onChangeText}
        keyboardType={props.keyboardType}
        {...props}
        value={props.value}
      />

并像这样使用它

<CustomEditText
          inputRef={(ref) => this.passwordInput = ref}
          labelText="Password"
          secureText={true}
          // onChangeText={text => this.setState({ password: text })}
          />