Ограниченный ввод символов

Question

Я пытаюсь создать ввод, ограниченный только 4 символами, с использованием семантического интерфейса реагирования, я пробовал много способов сделать это, но ни один из них, похоже, не работает.

<Input fluid
  value={this.state.code}
  type="text"
  minlength="4" maxlength="8" size="10"
  placeholder={t('Code')}
  onChange={this.onCodeChange.bind(this)}
  error={this.state.formErrorsKeys.code}
/>

Также я 'Я думаю, возможно ли разделить вход на 4 области ввода.

Приветствия!

Answer 1

React Semantic UI ожидает реквизиты верблюда maxLength и minLength, которые будут переданы html input.Вы используете все строчные.Изменение имен опор должно решить вашу проблему, однако, как уже говорили другие, может подойти пользовательская функция валидатора.

Answer 2

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

Примерно так:

const validateField = string => {
    return string.slice(0, 4);
};

console.log(validateField('string')); // => 'stri'
console.log(validateField('test_test')); // => 'test'

Вот пример: https://codesandbox.io/s/r55228449p

UPD

Также я думаюесли возможно сделать вход разбитым на 4 области ввода

Обновлен пример, добавив что-то похожее на «вход, разбитый на 4 области ввода»