html - 有限的字符输入

Question

我正在尝试使用 reactjs 语义 ui 创建仅限于 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

您只需要添加自定义验证函数，该函数接受输入值并返回修改后的字符串。

像这样:

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

Also I'm thinking if it's possible to make an input splitted into 4 input areas

更新了示例以添加类似于“一个输入分成 4 个输入区域”的内容