реагировать на родной текстовый ввод, изменять положение курсора при нажатии - PullRequest
Новая
       52

реагировать на родной текстовый ввод, изменять положение курсора при нажатии

0 голосов
/ 03 апреля 2020

Прямо сейчас, в моем собственном приложении, я не могу изменить промежуточное значение для каждого входа. Потому что каждый раз, когда я нажимаю на ввод текста, каретка находится в конце вставленной строки.

Например:

Значение: 123456 ----> Я хочу удалить / изменить только 23, но не могу, потому что каретка превышает последнее значение.

я пытался использовать selectTextOnFocus, но он срабатывает только при нажатии на другой ввод текста, и не работает, если данные предварительно заполнены. Я пытаюсь объяснить лучше

на изображении ниже, я перепрыгнул с первого текста Mobile Number на второй id RICE.

enter image description here

На изображении внизу я ввел новые значения 12321, но если я нажму второй раз на тот же самый ввод, текст не будет быть выбранным. Я пытался щелкнуть и остаться в течение 10 секунд, но ничего.

Я использую xcode для сборки приложения.

enter image description here

это мой компонент ввода 

const InputField: React.FC<Props> = (
  {
    placeholder,
    iconLeft,
    iconRight,
    dateTimeIcon,
    iconBackground,
    type,
    id,
    style,
    name,
    value,
    keyboardType,
    iconRightFunction,
    maxLength = 100,
    inputBackground,
    onChangeText,
    onChange,
    editable,
    textAlign,
    setMarginBottom,
    onFocus,
    multiline,
    numberOfLines,
    label,
    error,
    errorLabel,
    containerHeight,
    onBlur,
  },
  ref,
) => {
  const [hidePassword, showOrHidePassword] = useState(true);

  const _handleShowPassword = () => {
    showOrHidePassword(!hidePassword);
  };

  const _handleOnChange = ({ nativeEvent }) => {
    onChange && onChange(name, nativeEvent.text);
  };

  const _handleOnBlur = () => {
    onBlur && onBlur(name, value);
  };
  const input = useRef(null);
  const showPassword = type === 'password' && !error && value.length !== 0;
  return (
    <>
      {label && (
        <StyledLabelContainer setMargin={setMarginBottom}>
          <StyledLabel error={error}>{label}</StyledLabel>
          {error && <StyledLabel error={error}>{errorLabel}</StyledLabel>}
        </StyledLabelContainer>
      )}

      <StyledContainer containerHeight={containerHeight} setMargin={setMarginBottom}>
        {iconLeft && <StyledIconLeft bgColor={iconBackground}>{iconLeft}</StyledIconLeft>}
        <TouchableOpacity
          activeOpacity={0}
          onPress={() => {
            console.log('inputcurrent', input, input.current);
            input.current.focus();
          }}
          style={{ flex: 1 }}
        >
          <View pointerEvents="none" style={{ flex: 1 }}>
            <StyledInput
              style={style}
              ref={input}
              textAlign={textAlign}
              maxLength={maxLength}
              editable
              selectTextOnFocus
              clearTextOnFocus={false}
              secureTextEntry={type === 'password' && hidePassword}
              placeholder={placeholder}
              type={type}
              autoCapitalize="none"
              onChangeText={onChangeText}
              onChange={_handleOnChange}
              value={value}
              id={id}
              name={name}
              bgColor={inputBackground}
              keyboardType={keyboardType}
              blurOnSubmit={true}
              onFocus={onFocus}
              returnKeyType={'done'}
              onBlur={_handleOnBlur}
              error={error}
              multiline={multiline}
              numberOfLines={numberOfLines}
            />
          </View>
        </TouchableOpacity>

Вопрос

Как установить правильную позицию курсора во время нажатия? Пример: 123456 ----> пользователь нажимает в середине строки, я ожидаю увидеть символ между цифрами 3 и 4.

Мои попытки

Я читал об отборе, но мне не удалось его реализовать, мы будем очень рады любым советам.

Спасибо за время.

1 Ответ

2 голосов
/ 03 апреля 2020

Вы можете использовать опору selection, чтобы поместить курсор туда, где вы хотите его видеть. См. Документы: https://reactnative.dev/docs/textinput.html#selection

Вы можете создать представление, которое выглядит как текстовый ввод, но вместо этого представляет собой группу маленьких кнопок, по одной для каждого символа. Когда пользователь нажимает одну из этих кнопок, вы знаете, где он хочет разместить курсор (курсор). Затем вы визуализируете реальную TextInput и используете опору selection для перемещения каретки в правильное положение.

...