我尝试在使用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)