I'm using redux-form
and formValueSelector
to get input values from fields. I want to get value on change, but @@redux-form/CHANGE
action is called after my function called on onChange
. So I get not updated value. My code:
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);
and wrapper component:
class Persons extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
<PersonFilter/>
</div>
};
}
}
Instead of just passing onChange to the action you should setState
, firstly initialise the state this.state
inside the wrapper component constructor and make sure you pass props to the constructor as well , and then setting a state inside onChange function this.setState
and binding it. Something like this:
Wrapper Component
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)} />
}
}
And inside your PersonFilter
component make a function onFieldChange
which will pass the reference to the function onChange
inside wrapper component to set the state 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);
}
and then finally
<Field
onChange={this.onFieldChange.bind(this)}
className="person__input" icon="search"
name="searchName" component={renderField} type="text"
placeholder="Name"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.