在 redux-form 中，如何将输入的值限制在一个范围内？答案

【问题标题】：in redux-form, how to restrict the values of the input to a range?在 redux-form 中，如何将输入的值限制在一个范围内？
【发布时间】：2016-12-26 18:31:30
【问题描述】：

我希望用户能够输入最多 2000 的数字，超过 2000 的任何数字都将简单地作为“2000”反馈到输入中。

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

顺便说一句，'max' 属性只会阻止用户使用向上箭头来增加 2000 以上。

而且 redux-form 的 'validate' 功能不会限制可以输入的内容。

这是我如何将值（状态）限制为 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

我忘记了什么？

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

这就是Normalizing 的用途。像这样的东西（未经测试）：

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}/>

【讨论】：

谢谢先生。不知道要搜索“规范化”一词。
我不知道还能叫什么。 :-D 很高兴我能帮上忙。
有没有办法将比较值（即 2000）作为参数传递？

【解决方案2】：

export const maxLenght = max => value => {

    let v;
    let result = value.length > max;

    if(result === false) {
        v = value;
    }
    return v;
};

<Field
      name="name"
      type="text"
      component={renderField}
      label="Nome Completo *"
      placeholder="Nome Completo"
      normalize={maxLenght(10)}
    />

【讨论】：

格式化你的答案添加一些解释

【解决方案3】：

我认为这可以帮助你：

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

【讨论】：

我的错，我没有写 this.props 我写了 this.state
不幸的是，状态（映射到道具）没有改变输入 - 如图所示dl.dropboxusercontent.com/spa/lkj2dewi3ofvkgc/5_lwk-p6.jpg。当我将 this.props.breakfast_salt_amt_1 放在其他 EMPTY 输入框中时，它会填充这些输入框，但不会覆盖现有的 5000 并将其替换为 2000。
你能解释一下这是什么{...breakfast_salt_amt_1}
this.props.breakfast_salt_amt_1 正在处理其他输入框？
{...breakfast_salt_amt_1} 来自 const { Breakfast_salt_1,breakfast_salt_amt_1,breakfast_salt_2,breakfast_salt_amt_2} = this.props.fields;