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

我也在考虑是否有可能将输入拆分为4 输入区域

更新了示例，添加了类似于“将输入划分为4个输入区域”的内容

Answer 2

React Semantic UI期望将驼峰大小写maxLength和minLength道具传递给html input。您正在使用所有小写字母。更改道具名称应该可以解决您的问题，但是正如其他人所说，自定义验证器功能可能比较合适。

限制字符输入

2 个答案: