时间戳

首页 > 解决方案 > 如何使用 react-native 规范化 redux-form 以防止更多输入？

react-native - 如何使用 react-native 规范化 redux-form 以防止更多输入？

问题描述

使用：redux-form@7.3.0

<Field
    component={({ input: { onChange }}) => <TextInput onChangeText={onChange} />}
    name=‘truncate’
    normalize={(value) => value && value.toString().slice(0,2) || ''}
/>

在此截断字段中键入时，显示的值不会被截断。我可以继续输入前两个字符并查看输出。

提交周围表单时，我只看到截断字段值中的前两个字符。

为什么不截断可见输出会阻止更多输入？

根据下面的 Charles 回复，我还尝试了 redux-form 示例页面上显示的电话号码示例；输出未标准化。

尝试重新创建示例中显示的电话规范化最终得到相同的结果 - 显示的字段没有规范化：

https://redux-form.com/7.3.0/examples/normalizing/

标签： react-nativeredux-form

解决方案

您可以删除对normalize道具的使用，并将道具应用maxLength到您的TextInput.

例子：

<Field
    component={({ input: { onChange }}) => <TextInput onChangeText={onChange} maxLength={2} />}
    name="truncate"
/>

或者，您可以尝试将剩余的输入道具传递给您的TextInput.

例子：

<Field
    component={({ input: { onChange, ...remainingProps }}) => <TextInput onChangeText={onChange} {...remainingProps} />}
    name="truncate"
    normalize={value => value && value.slice(0, 2)}
/>

推荐阅读