如何使用 Redux 限制字段中的字符数？

Question

我有字段输入，我的想法是用户只能输入 15 个字符。 15 个字符后，我不想在字段中显示任何内容。我试过 normalize 但没有用。我正在检查 value.length，在 15 个字符后我的状态没有更新，这很好，但我仍然可以输入字符。我想输入 15 个字符后，如果用户输入的内容不在浏览器中显示。谁能帮帮我？

                   <Field
                        name={`name`}
                        placeholder='placeholder'
                        classes={classes}
                        component={this.component}
                        onChange={this.changeHandler}
                    />
                    changeHandler= (event) => { 
                      if(event.target.value.length < 16) 
                      {
                        this.setState({
                        myProperty: event.target.value
                        });
                      }

Answer 1

为此，您需要一个已处理的值。将 value={this.state.myProperty} 传递给字段。所以如果这个属性在15个字符后不再更新，该字段的值也不会更新。

Answer 2

对于 redux-form Field 没有限制字符数的道具。考虑到您在表单中使用 Field，您可以验证字段本身（使用 validate 道具，如 this 示例），但仍有可能添加超过 15 个字符。

但如您所知，您可以使用 component 道具自定义 Field。类似于：

<Field name="myField" component={renderField}/>

并且在 renderField 中你可以使用 input 并且在输入中你有 maxlength 道具。

所以你的 renderField 可能是这样的：

const renderField = (field) => (
    <div className="input-row">
      <input {...field.input} type="text" maxlength="15"/>
    </div>
  )

这应该可以解决您的问题。

如何使用 Redux 限制字段中的字符数？

How to limit number of characters in Field using Redux?

reactjs

typescript

redux

react-redux

redux-form