有限的字符输入答案

【问题标题】：Limitted character input有限的字符输入
【发布时间】：2019-01-28 15:45:43
【问题描述】：

我正在尝试使用 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 个输入区域。

干杯！

【问题讨论】：

您使用的是哪种Input 组件，那里？也许它不知道maxlength？无论如何，您应该检查 onCodeChange 函数中文本的长度并在那里控制长度。这是最可靠的方法。

标签： html css reactjs input semantic-ui-react

【解决方案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 个输入区域”的内容

【讨论】：

【解决方案2】：

React Semantic UI 需要骆驼大小写 maxLength 和 minLength 属性，它们将传递给 html input。您正在使用全部小写。更改道具名称应该可以解决您的问题，但是正如其他人所说，自定义验证器功能可能是合适的。

【讨论】：

嗯，我已经搜索并没有找到像 maxLength 或 minLength 这样的东西。我依赖这个文档：react.semantic-ui.com/elements/input。在哪里可以找到相关信息？
它似乎不在他们的文档中，但如果您编辑并使用他们的示例之一进行尝试，它将起作用。其他库，如 Ant Design，也是如此。