Javascript 如何使用redux表单中的formValueSelector在更改时获取更新的输入字段值

Javascript 如何使用redux表单中的formValueSelector在更改时获取更新的输入字段值,javascript,redux-form,Javascript,Redux Form,我使用redux表单和formValueSelector从字段中获取输入值。我想在更改时获取值,但@redux表单/更改操作是在我的函数在onChange上调用后调用的。所以我没有得到更新的值。我的代码: export class PersonFilter extends React.Component { constructor(props) { super(props); } filterByName = (event, searchName) => {

我使用redux表单和formValueSelector从字段中获取输入值。我想在更改时获取值,但@redux表单/更改操作是在我的函数在onChange上调用后调用的。所以我没有得到更新的值。我的代码:

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传递给应该设置state的操作,首先在包装组件构造函数中初始化state this.state,并确保也将props传递给构造函数,然后在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)} />
    }
}
最后

     <Field
      onChange={this.onFieldChange.bind(this)}
      className="person__input" icon="search"
      name="searchName" component={renderField} type="text"
      placeholder="Name"/>

是否有父组件?@Aaqib是,组件的包装器这里是包装器组件code@Aaqib更新了我的问题
     <Field
      onChange={this.onFieldChange.bind(this)}
      className="person__input" icon="search"
      name="searchName" component={renderField} type="text"
      placeholder="Name"/>