Redux Form和Wrapped Component失去了对第一次变化的关注

时间:2017-03-01 03:53:09

标签: reactjs redux react-redux redux-form

我尝试在使用redux表单时集成react-bootstrap-autosuggest库。不幸的是,用redux形式包装的组件的第一个更改事件使得该特定组件立即失去焦点。因此,用户需要再次单击该字段才能继续键入。否则,它按预期工作。对原因/补救措施的任何想法?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as Actions from '../actions';
import { Field, reduxForm } from 'redux-form';
import { Modal } from 'react-bootstrap';
import Autosuggest from 'react-bootstrap-autosuggest'


class ComplaintModalForm extends Component {

  close() {
    this.props.actions.hideModal();
  }

  handleFormSubmit(formProps) {
    this.props.actions.submitComplaint(formProps);
  }

  render(){
    const { handleSubmit } = this.props;

    const show = this.props.modalType ? true : false;

    const RenderTypes = ({input, meta: {touched, error} }) => (
      <div>
        <Autosuggest
          datalist={[ 'Type_1', 'Type_2', 'Type_3' ]}
          {...input}
        />
        {touched && error && <span>{error}</span>}
      </div>
    );

    return(
      <div>
        <Modal show={show} onHide={() => this.close()}>
          <Modal.Header closeButton>
            <Modal.Title>Create Complaint</Modal.Title>
              </Modal.Header>
              <Modal.Body>
              <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

              ...

              <div className="form-group">
                <label htmlFor="complaint_type">Type</label>
                <Field className="form-control" name="complaint_type" component={RenderTypes} type="text"/>
              </div>

              ...

              <button type="button" className="btn btn-primary btn-md btn-block">Submit</button>
            </form>
          </Modal.Body>
        </Modal>
      </div>
    )
  }
}

const ComplaintModalFormTemp = reduxForm({
  form: 'ComplaintModalForm',
})(ComplaintModalForm);

function mapStateToProps(state) {
  return {
    modal: state.modal,
    ... 
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ComplaintModalFormTemp)

0 个答案:

没有答案