以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
我有什么忘记了吗?
答
这是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}/>
谢谢先生。不知道搜索“正常化”这个词。 – dwilbank
我不知道还有什么叫它。 :-D很高兴我能帮上忙。 –
有没有办法将比较值(即2000)作为参数传递? – skube