![](/img/trans.png)
[英]Using props.change to change the value of an input field in redux-form
[英]How to get updated input field value on change using formValueSelector in redux-form
我正在使用redux-form
和formValueSelector
從字段中獲取輸入值。 我想從更改中獲取價值,但是在函數onChange
上調用@@redux-form/CHANGE
操作。 所以我沒有更新的價值。 我的代碼:
export class PersonFilter extends React.Component {
constructor(props) {
super(props);
}
filterByName = (event, searchName) => {
//here searchName is getting old value
store.dispatch({type: 'PERSON_FILTER_BY_NAME', payload: {name: searchName}});
};
render() {
const {
searchName
} = this.props;
return (
<form className="person person--filter" onSubmit={e => {
e.preventDefault();
this.filterByName(e, searchName)
}}>
<Field
onChange={e => {
this.filterByName(e, searchName)
}}
className="person__input" icon="search"
name="searchName" component={renderField} type="text"
placeholder="Name"/>
</form>
);
}
}
PersonFilter = reduxForm({
form: 'filter',
initialValues: {
searchName: store.getState().personsFilterReducer.filterByName
}
})(PersonFilter);
const selector = formValueSelector('filter');
PersonFilter = connect(state => {
const searchName = selector(state, 'searchName');
return {
searchName
}
})(PersonFilter);
和包裝器組件:
class Persons extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
<PersonFilter/>
</div>
};
}
}
而不是僅將onChange傳遞給操作,您應該setState
,首先在包裝器組件構造函數中初始化狀態this.state
,並確保將道具也傳遞給構造函數,然后在onChange函數this.setState
設置一個狀態並將其綁定。 像這樣:
包裝組件
class Persons extends React.Component {
constructor (props) {
super(props);
this.state = {}
}
onChange(field, value) {
this.setState({[field]: value});
}
render () {
return <PersonFilter onChange={this.onChange.bind(this)} />
}
}
然后在PersonFilter
組件內部創建一個函數onFieldChange
,該函數onFieldChange
引用傳遞給包裝組件內部的onChange
函數以設置狀態this.setState
export class PersonFilter extends React.Component {
constructor(props) {
super(props);
}
onFieldChange(event) {
const changeName = event.target.name;
const changeValue = event.target.value;
this.props.onChange(fieldName, fieldValue);
}
然后最后
<Field
onChange={this.onFieldChange.bind(this)}
className="person__input" icon="search"
name="searchName" component={renderField} type="text"
placeholder="Name"/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.