![](/img/trans.png)
[英]Out of focus on first onChange event redux-form ( filedarray )
[英]Getting redux-form values in onChange event
在每次更新redux-form
后,如何從由redux-form
管理的表單中獲取值的正確方法是什么? 每當表單更改時,我都需要使用輸入到表單中的值來調度操作。
我當前的解決方案淘汰了舊的值,而不是剛剛更新的值。
onFormChange(e) {
const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields;
console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value);
}
render() {
return (
<form onChange={this.onFormChange}>
// inputs here
</form>
);
}
我的其他解決方案是這樣,但我不知道它的可靠性:
onFormChange(e) {
console.log(e);
setTimeout(() => {
const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields;
console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value);
}, 0);
}
使用redux-form 6,您可以使用formValueSelector
獲得值:
import { formValueSelector } from 'redux-form';
const selector = formValueSelector('myFormName');
connect(
state => ({
values: selector(state, 'fieldValue1', 'fieldValue2', 'fieldValue3');
})
)(MyFormComponent);
現在,您可以比較當前值和componentWillReceiveProps
的先前值:
componentWillReceiveProps(nextProps) {
const nextValues = nextProps.values;
const values = this.props.values;
// if at least one of the form values changed
if(Object.keys(nextValues).some((key) => nextValues[key] !== values[key])) {
console.log(nextProps.values); // do something with values
}
}
使用版本6之前的redux-form,您不必使用formValueSelector
因為redux-form會自動將values
prop添加到裝飾的表單中。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.