[英]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.