TextInput不专注于“下一个”

Question

Am具有带有标签的自定义文本输入组件。我有4个组件，一个又一个

ex：

Fullname
Mobile
Password
Pin

当我在fullName移动字段中点击下一步时，没有得到关注。

export default function LabelledText(props) {
  const [inputFocused, setFocused] = useState(props.focusInput);
  const [inputValue, setValue] = useState(null);
  if (props.focusInput && !inputFocused) {
    console.log('label :: ' + props.label);

    setFocused(props.focusInput);
    this.labelledText.focus();
  }

  return (
    <View>
      <Text
        style={{
          color: inputFocused ? '#00a3ee' : Colors.LIGHT_BLACK_HEADING_TEXT,
          fontSize: responsiveFontSize(1.4),
          marginTop: responsiveHeight(2),
          //   opacity: new Animated.spring(),
          fontFamily: Font.regular,
        }}>
        {inputValue == null || inputValue.length == 0
          ? inputFocused
            ? props.label
            : null
          : props.label}
      </Text>
      <View style={{flexDirection: 'row'}}>
        <TextInput
          ref={input => {
            this.labelledText = input;
          }}
          showSoftInputOnFocus={true}
          style={{
            width: '100%',
            backgroundColor: 'transparent',
            color: 'black',
            marginVertical: 6,
            fontFamily: Font.regular,
            // paddingVertical: 2,
            fontSize: responsiveFontSize(1.65),
          }}
          keyboardType={
            props.keyboardType != undefined
              ? props.keyboardType
              : 'email-address'
          }
          returnKeyType={
            props.returnKeyType != undefined ? props.returnKeyType : 'next'
          }
          placeholder={props.placeHolder}
          value={inputValue}
          onChange={data => {
            console.log('b4' + data.nativeEvent.text);
            props.onValueChange(data.nativeEvent.text);
            setValue(data.nativeEvent.text);
          }}
          numberOfLines={1}
          onFocus={() => {
            LayoutAnimation.configureNext(
              LayoutAnimation.Presets.easeInEaseOut,
            );
            setFocused(true);
          }}
          onBlur={() => {
            setFocused(false);
          }}
          onSubmitEditing={() => {
            props.onInputFinished();
          }}
          maxLength={props.maxLength}
        />
      </View>
      <View
        style={{
          width: '100%',
          height: props.error ? 1.5 : inputFocused ? 1 : 0.5,
          backgroundColor: props.error
            ? 'red'
            : inputFocused
            ? Colors.BLUE
            : Colors.LIGHT_BLACK_HEADING_TEXT,
        }}
      />
      {props.error ? (
        <Text
          style={{
            color: 'red',
            fontSize: responsiveFontSize(1.4),
            marginTop: responsiveHeight(0.4),

            fontFamily: Font.regular,
          }}>
          {props.errorText}
        </Text>
      ) : null}
    </View>
  );
}

// textinput with label top
// underline highlight color
// error hightlight and icon on right
// next, done option
//

在我的父视图中，这就是自定义组件的调用方式

  <LabelledTextInput
  placeHolder={'FULL NAME'}
  label={'FULL NAME'}
  returnKeyType={'next'}
  keyboardType={'email-address'}
  onValueChange={value => {
       console.log(value);
       const error_value = {...this.state.errors};
       delete error_value['fullname'];
       this.setState({fullname: value, errors: error_value});
       }}
  error={this.state.errors['fullname'] ? true : false}
  errorText={this.state.errors['fullname']}
  maxLength={20}
  onInputFinished={() => {
  this.setState({mobileEmailFocus: true}, () => {
        console.log(
        'user typing stopped and keyboard dismissed fullname' +
         this.state.mobileEmailFocus,
          );
                  
         });
       }}
    />

有人可以指出我该如何实现吗？

感谢您的帮助。

谢谢。

已解决

感谢毗湿奴的见解。它帮助我解决了焦点问题。发布我的答案可能会帮助某个人。

我的自定义组件

export default function LabelledText(props) {
 const [inputFocused, setFocused] = useState(props.focusInput);
  const [inputValue, setValue] = useState(null);
  const labelledText = useRef(null);
  if (props.focusInput && !inputFocused) {
    console.log('label :: ' + props.label);
    setFocused(props.focusInput);
    labelledText.current.focus();
    props.removeStateFocus();
  }

  return (
    <View>
      <Text
        style={{
          color: inputFocused ? '#00a3ee' : Colors.LIGHT_BLACK_HEADING_TEXT,
          fontSize: responsiveFontSize(1.4),
          marginTop: responsiveHeight(2),
          //   opacity: new Animated.spring(),
          fontFamily: Font.regular,
        }}>
        {inputValue == null || inputValue.length == 0
          ? inputFocused
            ? props.label
            : null
          : props.label}
      </Text>
      <View style={{flexDirection: 'row'}}>
        <TextInput
          ref={labelledText}
          showSoftInputOnFocus={true}
          style={{
            width: '100%',
            backgroundColor: 'transparent',
            color: 'black',
            marginVertical: 6,
            fontFamily: Font.regular,
            // paddingVertical: 2,
            fontSize: responsiveFontSize(1.65),
          }}
          keyboardType={
            props.keyboardType != undefined
              ? props.keyboardType
              : 'email-address'
          }
          returnKeyType={
            props.returnKeyType != undefined ? props.returnKeyType : 'next'
          }
          placeholder={props.placeHolder}
          value={inputValue}
          onChange={data => {
            console.log('b4' + data.nativeEvent.text);
            props.onValueChange(data.nativeEvent.text);
            setValue(data.nativeEvent.text);
          }}
          numberOfLines={1}
          onFocus={() => {
            LayoutAnimation.configureNext(
              LayoutAnimation.Presets.easeInEaseOut,
            );
            setFocused(true);
          }}
          onBlur={() => {
            setFocused(false);
          }}
          onSubmitEditing={() => {
            props.onInputFinished();
          }}
          maxLength={props.maxLength}
        />
      </View>
      <View
        style={{
          width: '100%',
          height: props.error ? 1.5 : inputFocused ? 1 : 0.5,
          backgroundColor: props.error
            ? 'red'
            : inputFocused
            ? Colors.BLUE
            : Colors.LIGHT_BLACK_HEADING_TEXT,
        }}
      />
      {props.error ? (
        <Text
          style={{
            color: 'red',
            fontSize: responsiveFontSize(1.4),
            marginTop: responsiveHeight(0.4),

            fontFamily: Font.regular,
          }}>
          {props.errorText}
        </Text>
      ) : null}
    </View>
  );
}

这就是我在父视图中调用的方式

<LabelledTextInput
              placeHolder={'FULL NAME'}
              label={'FULL NAME'}
              returnKeyType={'next'}
              keyboardType={'email-address'}
              removeStateFocus={() => {
                this.setState({mpinFocus: false}, () => {
                  console.log('remove focus fullname');
                });
              }}
              onValueChange={value => {
                console.log(value);
                const error_value = {...this.state.errors};
                delete error_value['fullname'];
                this.setState({fullname: value, errors: error_value});
              }}
              error={this.state.errors['fullname'] ? true : false}
              errorText={this.state.errors['fullname']}
              maxLength={20}
              onInputFinished={() => {
                this.setState({mobileEmailFocus: true}, () => {
                  console.log(
                    'user typing stopped and keyboard dismissed fullname' +
                      this.state.mobileEmailFocus,
                  );
                  // this.forceUpdate();
                });
              }}
            />