以redux形式，如何限制输入值的范围？

我希望用户能够输入高达2000的数字，任何超过2000的数据将被简单地反馈回输入为'2000'。以redux形式，如何限制输入值的范围？

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

顺便说一句，“最大”属性只使用向上箭头递增以上2000

而终极版形式的“验证”功能不会限制什么可以停止输入用户。

这里是我如何限制值（状态）到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终极版插件，我可以看到的状态这些值在2000年达到顶峰。

但是，我如何强制该状态回到我的redux形式的输入字段？

将状态映射到道具并使用道具不起作用。这样做让我键入任意数量超过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

我有什么忘记了吗？

来源

2016-12-26 dwilbank

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

来源

2016-12-27 14:47:28

谢谢先生。不知道搜索“正常化”这个词。 – dwilbank

我不知道还有什么叫它。 :-D很高兴我能帮上忙。 –

有没有办法将比较值（即2000）作为参数传递？ – skube

，我认为这可以帮助你：

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

来源

2016-12-26 18:51:35 Codesingh

谢谢，但this.state和状态都为空 – dwilbank

请检查编辑。 – Codesingh

我的不好，而不是编写this.props我写这个。状态 – Codesingh

以redux形式，如何限制输入值的范围？

回答

相关问题