Question

我正在使用此软件包react-phone-number-input

上下文

我有这个电话号码字段

<InputPhone
        {...input}
        value={input.value || ''}
        placeholder={intl.formatMessage(
          placeholder ? messages[placeholder] : messages.placeholder,
        )}
        style={{
          borderColor: meta && meta.touched && meta.error && 'red',
        }}
        tabIndex={index}
        size={size}
      />

这是在功能组件内部，我不能使用另一个textInput，因为我们以多种形式使用此小组件，并且在其中具有特殊功能，例如样式和占位符。

问题

问题与该软件包react-phone-number-input有关：如果我尝试在前两个部分中编辑数字，则插入符号会跳到末尾。

有人知道自react-phone-number-input的SmartCaret功能被禁用以来，我该如何解决？

Answer 1

看看这个issue-听起来像是您的问题。

您可以尝试使用Smart Caret功能-文档页面上的最后一项。请记住，在某些Android设备上可能会有限制。

import SmartInput from 'react-phone-number-input/smart-input'

<PhoneInput
    inputComponent={ SmartInput }
    placeholder="Enter phone number"
    value={ this.state.value }
    onChange={ value => this.setState({ value }) }/>

希望有帮助！

如果这不起作用，那么像Dupocas建议的那样，一个最小的，可重现的示例将很有帮助。

反应输入-光标跳到末尾

1 个答案: