redux-form@7.3.0结合React Native时normalize未截断输入显示问题

这问题我之前在用redux-form@7.3.0时也碰到过，核心原因是redux-form的normalize方法设计逻辑就是仅处理提交到Redux Store的值，不会同步修改输入组件的显示内容或限制用户输入。

具体分析 #

你代码里的normalize函数确实会在表单提交时把truncate字段的值截断为前两位，但这个处理后的结果只会更新到Redux的表单状态中，并不会回传给TextInput组件作为它的显示值。所以输入框里始终会显示用户输入的原始完整内容，只有提交时才会用归一化后的值。

官方的电话号码归一化示例也是同样的逻辑：输入时显示用户输入的原始数字，提交时才会格式化成指定格式——因为normalize的定位就是数据层面的归一化处理，而非UI交互层面的输入限制。

解决方案 #

如果想要实现「输入时实时截断显示，阻止输入超过两位」的效果，需要在输入组件的回调里主动处理值，再同步给redux-form的输入处理函数，同时绑定显示值：

<Field 
  component={({ input: { onChange, value }}) => {
    const handleInputChange = (text) => {
      // 实时截断输入值到前两位
      const truncatedValue = text ? text.toString().slice(0, 2) : '';
      // 把截断后的值传给redux-form的onChange，更新store状态
      onChange(truncatedValue);
    };
    // 用redux store里的归一化后的值作为输入框的显示值
    return <TextInput onChangeText={handleInputChange} value={value} />;
  }} 
  name='truncate' 
/>

如果只是需要「提交时截断，但允许用户输入完整内容」，那你当前的代码逻辑是完全正常的，这就是normalize方法的预期行为。

内容的提问来源于stack exchange，提问作者Tony