我搜索并尝试了很多使用我的反应形式的选择输入类型使用redux-form库。
一切正常,所有其他输入类型都可以,但不能选择以下操作:初始化,检索提交的值等。
我尝试使用带有“select”的模型道具并使用我自己的函数来渲染它。当我使用模型的选择版本时,我设法获得组合框字段的选项,但我无法设置值并在提交时检索它。凭借我自己的功能,我甚至无法将选项设置为列表...
这是我的代码:
// 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);
答案 0 :(得分:12)
以下是official docs:
中简单选择字段的示例<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component="select">
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
您的实施没有映射option
,因此select
不起作用。
<强>旁注强>
要传递初始值,您应该将initialValues
属性添加到reduxForm配置,而不是向该字段添加value
属性。示例如下:
export default reduxForm({
form: 'profile',
validate: validateProfileForm,
initialValues: { ... }
})(ProfileForm);
答案 1 :(得分:0)
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
/*------- connect react with redux --------*/
import { connect } from 'react-redux';
/*------- action which all data to data base --------*/
import { addProduct } from '../actions'
/*------- redux form --------*/
import { Field, reduxForm } from 'redux-form';
class Form extends Component {
//PRISTINE / DIRTY // TOUCHED / ERROR : events in redux-form
/*------- renderSelectField --------*/
renderSelectField(field){
const className = `form-input ${field.meta.touched && field.meta.error ? 'has-error':''}`;
return(
<div className={className}>
<label>{field.myLabel}</label>
<select {...field.input} >
{field.children}
</select>
<div className="error">
{field.meta.touched ? field.meta.error:''}
</div>
</div>
)
}
/*------- onSubmit() : runs on submit --------*/
onSubmit(values){
// const error = this.validate(values);
// console.log(error)
console.log(values)
this.props.dispatch(addProduct({
values
}))
}
render(){
return(
<div className="Form">
<div className="top">
<h3>Add a Message</h3>
<Link to="/">Back</Link>
</div>
<form onSubmit={this.props.handleSubmit((event)=>this.onSubmit(event))}>
<Field
myLabel="Select Rating"
name="rating"
component={this.renderSelectField}>
<option></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</Field>
<button type="submit">Submit</button>
</form>
</div>
)
}
}
/*------- validate() : validates our form --------*/
function validate(values){
const errors = {};
if(!values.rating){
errors.rating = "The rating is empty"
}
return errors;
}
/*------- it returns messages when action is called and state going to change --------*/
function mapStateToProps(state){
return {
product: state.data
}
}
/*------- reduxForm : connects redux-form with react form --------*/
export default reduxForm({
validate,
form:'AddProduct',
})(
connect(mapStateToProps,{addProduct})(Form)
)