Я искал и много пробовал использовать тип ввода select с моей реакционной формой, используя библиотеку редукционной формы.
Все работает, все остальные типы ввода в порядке, но не выбираются для следующих действий: инициализировать, извлекать переданное значение и т.д.
Я попытался использовать опору модели с помощью "select" и моей собственной функцией для ее рендеринга. Когда я использую выбранную версию для модели, мне удается получить параметры поля combobox, но мне не удается установить значение и получить его при отправке. С моей собственной функцией мне даже не удается установить параметры в список...
Вот мой код:
// FormComponent file
const { handleSubmit } = this.props;
...
<form onSubmit={handleSubmit(this.props.onSubmitProfileUpdate)}>
<Field name='ranking' className='input-row form-group form-control' component={renderSelectField}>
{tennisRankings.map(ranking =>
<option value={ranking} key={ranking}>{ranking}</option>
)}
</Field>
...
ProfileForm.propTypes = {
user: React.PropTypes.object,
fields: React.PropTypes.shape({
firstname: React.PropTypes.string,
lastname: React.PropTypes.string,
ranking: React.PropTypes.string,
email: React.PropTypes.string,
telephone: React.PropTypes.string,
city: React.PropTypes.string
}),
errorMessage: React.PropTypes.string,
confirmationMessage: React.PropTypes.string,
onSubmitProfileUpdate: React.PropTypes.func.isRequired,
handleSubmit: propTypes.handleSubmit,
initialize: propTypes.initialize
};
export default reduxForm({
form: 'profile',
validate: validateProfileForm
})(ProfileForm);
Моя функция для отображения поля:
// Functions shared
export const renderSelectField = (field) => {
var styles = {};
var containerStyle = getInputStylesContainer();
if (field.input.value || field.meta.touched) {
if (!field.meta.error) {
styles = getInputStylesSuccess();
containerStyle = classNames(containerStyle, {'has-success': true});
} else {
styles = getInputStylesError();
containerStyle = classNames(containerStyle, {'has-error': true});
}
}
return (<div className={containerStyle}>
{displayInputLabel(styles.idInput, field.label)}
<select {...field.input} className='form-control' id={styles.idInput} value={field.input.value} type={field.type} placeholder={field.label} aria-describedby={styles.ariaDescribedBy} />
<span className={styles.glyphicon} aria-hidden='true' />
{field.meta.touched && field.meta.error &&
displayErrorMessage(field.meta.error)}
</div>);
};
У вас есть ключ к выполнению этого простого действия? Будьте снисходительны Я новичок:)
Большое спасибо за вашу помощь:)
ИЗМЕНИТЬ:
Вот как я инициализирую свои значения формы:
// FormComponent file
handleInitialize () {
// TODO: Manage properly user not available case (redux form reason ?)
if (this.props.user.firstname === undefined) return;
const initData = {
'firstname': this.props.user.firstname.toString(),
'lastname': this.props.user.lastname.toString(),
'city': this.props.user.city === undefined ? '' : this.props.user.city.toString(),
'email': this.props.user.email.toString(),
'ranking': this.props.user.ranking.toString(),
'telephone': this.props.user.telephone === undefined ? '' : this.props.user.telephone.toString()
};
console.log('Ranking', this.props.user.ranking);
this.props.initialize(initData);
}
componentDidMount () {
this.handleInitialize();
}
....
export default reduxForm({
form: 'profile',
validate: validateProfileForm
})(ProfileForm);