Как сделать чтобы синхронно вводилось значение поля?

Question

[Daniil161rus]

Есть 2 поля :
1.Имя
2.Имя латиницей*
Надо чтобы значение вводилось синхронно с предыдущим полем в списке. Как это сделать помогите или скиньте где можно это посмотреть

<Form>
          <Form.Item label="Имя">
            <Input />
          </Form.Item>

          <Form.Item label="Name">
            <Input />
          </Form.Item>
</Form>

Comments

[Mikhail Osher]

То есть, редактируем в одном - в другом инпуте надо то же значение выставить?
Код должен быть один в один без изменений (что очень нелогично, но всё же надо спросить) или можно поверх что-то дописать?

[Daniil161rus]

Mikhail Osher, надо чтобы в первом поле я писал на русском, а тем временем во втором оно синхронно писалось на латинском

Answer 1

[0xD34F]

Сделать объект с транслитерированными символами:

const letters = {
  'а': 'a',
  'б': 'b',
  'в': 'v',
  ...
};

В стейте хранить оригинальное и транслитерированное значения:

state = {
  value: '',
  translitValue: '',
}

При изменении содержимого инпута с оригинальным значением обновлять оба:

onChange = ({ target: { value } }) => {
  this.setState({
    value,
    translitValue: value.toLowerCase().split('').map(n => letters[n] || n).join(''),
  });
}

<input value={this.state.value} onChange={this.onChange} />
<input value={this.state.translitValue} readOnly />

https://jsfiddle.net/oeL4u68t/

Comments

[Daniil161rus]

Спасибо большое!

Answer 2

[Дмитрий]

Если я правильно понял вопрос, нужно что-то вроде этого: https://codesandbox.io/s/priceless-banzai-orcn3

Comments

[Daniil161rus]

Почти, выше скинули как мне надо было. Вам тоже спасибо!