Как я могу установить пользовательскую позицию курсора в Textinput? - PullRequest
Новая
       39

Как я могу установить пользовательскую позицию курсора в Textinput?

0 голосов
/ 01 июля 2019

Я пытаюсь установить адаптивную позицию моего курсора.
Я использую TextInputMask для значения маски как деньги.

Я пытаюсь сделать что-то подобное

Корпус:

  1. 1008 * Начальный *

Мое значение по умолчанию в TextInput => 0,00

  1. Когда пользователь впервые нажимает TextInput для типа

Я хочу, чтобы моя позиция курсора была равна => 0 |, 00

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

Значение как => 123 |, 00

  1. Если пользователь нажимает кнопку запятой (',')

Курсор должен быть как состояние, которое => 123,0 | 0 или 123, | 00

  1. Когда пользователь вводит число, оно должно быть написано как вставка на клавиатуре.

    Например:

Пользователь нажимает 1 => 123,1 | 0 после того, как пользователь нажимает 2 => 123 |, 12 (вставка выключена
и продолжайте как начало дела)

Gif моего текущего приложения:

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

Нажмите для GIF

Некоторые из моих текущих кодов: 

this.state = {
        selection: {start: 0, end: 0},
        noCents: true,
        firstFocus: true,
        count: 0
    };

. , . 

setSelection = () => {
    if (this.state.firstFocus) {
        this.setState({selection: {start: 1, end: 1}});
        this.setState({firstFocus: false})
    }
};

. , . 

doJob(amount) {
    if (this.state.count === 2 && !this.state.noCents) {
        this.setState({
            count: 0,
            noCent: true
        })
    }
    if (amount.length !== 0 && this.state.noCents) {
        this.setState({
            selection: {
                start: amount.length - 3,
                end: amount.length - 3
            }
        });
    } else if (amount.length !== 0 && !this.state.noCents) {
        this.setState({count: this.state.count + 1});
        if (this.state.count === 1) {
            this.setState({
                selection: {
                    start: amount.length - 2,
                    end: amount.length - 2
                },
            });
        }
        if (this.state.count === 2) {
            this.setState({
                selection: {
                    start: amount.length - 1,
                    end: amount.length - 1
                },
            });
        }}
}

. , . 

<TextInputMask
  style={styles.input}
  type={'money'}
  options={{
    precision: 2,
    separator: ',',
    delimiter: '.',
    unit: '',
    suffixUnit: '',
    zeroCents: this.state.noCents
  }}
  value={this.props.amount}
  onChangeText={amount => this.props.amountChanged({
        props: 'amount',
        value: amount
    },
    this.doJob(amount))}
  onFocus={this.setSelection}
  selection={this.state.selection}
  //for press comma
  onKeyPress={(e) => (e.nativeEvent.key === ',' ? this.setState({noCents: false}) : null)}/>
...