反应本机文本输入，按下时更改光标位置

Question

现在，在我的 react native 应用程序中，我无法更改每个输入的中间值。因为每次我按下文本输入时，插入符号都位于插入字符串的末尾。

例如：

值：123456 ---->我只想删除/更改 23，但我不能，因为插入符号超过了最后一个值。

我尝试使用 selectTextOnFocus，但它只会在我单击其他文本输入时触发，并且如果数据是预填充的，它就不起作用。我试着解释得更好

在下图中，我从第一个文本 Mobile Number 跳转到第二个文本 id RICE。

在下图中，我输入了新值12321，但如果在同一输入上再次按下，文本将不会被选中。我试图点击并停留大约 10 秒，但什么也没有。

我正在使用 xcode 来构建应用程序。

这是我的输入组件

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 之间的插入符号。

我的尝试

我阅读了有关选择的内容，但没有成功实施，非常欢迎各种建议。

感谢您的时间。

Answer 1

您可以使用selection 属性将光标定位到您想要的位置。参见文档：https://reactnative.dev/docs/textinput.html#selection

您可以创建一个看起来像文本输入但实际上是一组小按钮的视图，每个字符一个。当用户单击其中一个按钮时，您就知道他们希望插入符号（光标）在哪里。然后渲染真正的TextInput 并使用selection 道具将插入符号移动到正确的位置。