gpt4 book ai didi

javascript - 如何使用带有 redux-form 的选择输入类型?

转载 作者:可可西里 更新时间:2023-11-01 02:22:40 24 4
gpt4 key购买 nike

我搜索并尝试了很多使用 redux-form 库的选择输入类型和我的 react 表单。

一切正常,所有其他输入类型都正常,但不是以下操作的选择类型:初始化、检索提交的值等。

我尝试将模型 Prop 与“选择”一起使用,并使用我自己的函数来渲染它。当我为模型使用选择版本时,我设法获得了组合框字段的选项,但我没有设法设置一个值并在提交时检索它。使用我自己的函数,我什至无法将选项设置到列表中......

这是我的代码:

// 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>);
};

你有什么线索可以执行这个简单的 Action 吗?放纵我是初学者:)

非常感谢您的帮助:)

编辑:

这是我初始化表单值的方式:

// 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);

最佳答案

这是来自 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);

关于javascript - 如何使用带有 redux-form 的选择输入类型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42753912/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com