在redux-form中,如何将输入值限制在一个范围内？

Question

我希望用户能够输入最多2000的数字,超过2000的任何内容都可以简单地反馈到输入中作为'2000'.

<input type="number"   className="no-spin"
                       min="0" max="2000"
                       value={???}
                       {...eval(`${meal}_salt_amt_1`)} />

顺便说一下,'max'属性只能阻止用户使用向上箭头增加到2000以上.

而redux-form的"验证"功能并不限制可输入的内容.

以下是我将值(状态)限制为2000的方法......

export function updateStats(values) {
    for (var value in values){
        if (value.search('salt_amt') >= 0) {
            if ( values[value] > 2000) values[value] = 2000;
        }
    }
    return {
        type: UPDATE_STATS,
        stats: JSON.parse(JSON.stringify(values))
    };
}

...到目前为止一切都那么好,因为在我的DevTools redux插件中,我可以看到这些值的状态在2000年达到顶峰.

但是如何强制该状态回到我的redux-form输入字段？

将状态映射到道具并使用道具不起作用.这样做让我输入超过2000的任何数字......

function mapStateToProps(state) {
    return {
        ...
        breakfast_salt_amt_1: state.stats.breakfast_salt_amt_1,
        ...
    }
}

<input type="number"   className="no-spin"
                       min="0" max="2000"
                       value={breakfast_salt_amt_1}
                       {...breakfast_salt_amt_1} />

只是使用国家也不起作用......

<input type="number"   className="no-spin"
                       min="0" max="2000"
                       value={state.stats.breakfast_salt_amt_1}
                       {...breakfast_salt_amt_1} />

// =>  Uncaught TypeError: Cannot read property 'stats' of null

我忘记了什么？

Answer 1

这就是规范化的目的.像这样(未经测试):

const under2k = value => {
  if(value < 0) {
    return 0
  } else if(value > 2000) {
    return 2000
  } else {
    return value
  }
}

<Field
  name="breakfastSaltAmt"
  component="input"
  type="number"
  normalize={under2k}/>