Redux 表单默认值
[英] Redux form defaultValue
本文介绍了Redux 表单默认值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何设置defaultValue 到输入组件?
<Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/>
我像上面一样尝试过，但我的字段是空的.我正在尝试创建 fieldArray(动态表单):
{fields.map((prize, index) =><div key={index} className="fieldArray-container relative border-bottom" style={{paddingTop: 35}}><small className="fieldArray-title marginBottom20">奖品{index + 1}<按钮类型=按钮"标题="移除奖品"className="btn btn-link 绝对链接正确"onClick={() =>fields.remove(index)}>Delete</button></小><div className="row"><div className="col-xs-12 col-sm-6"><Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/><字段名称={`${prize}.prizeId`} defaultValue={index} component={Input} type='text'/><字段name={`${prize}.name`}类型=文本"组件={输入}label='奖品名称'/>
<div className="col-xs-12 col-sm-6"><字段名称={`${奖品}.url`}类型=文本"组件={输入}标签=奖品网址"/>
<div className="col-xs-12"><字段名称={`${奖品}.description`}类型=文本"组件={输入}label="奖品说明"/>
)}
解决方案
在 redux 表单上，您可以使用这样的值对象调用 initialize():
class MyForm 扩展组件 {组件WillMount(){this.props.initialize({ name: '你的名字' });}//如果你的数据可以更新componentWillReceiveProps (nextProps) {if (/* nextProps 以重置默认值的方式更改 */) {this.props.destroy();this.props.initialize({…});}}使成为 () {返回 (<表格><Field name="name" component="..."/></表单>);}}导出默认 reduxForm({})(MyForm);
通过这种方式，您可以一遍又一遍地更新默认值，但如果您只是需要在第一次执行此操作，则可以:
export default reduxForm({values: {…}})(MyForm);
How to set defaultValue to input component?
<Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/>
I tried like above but my fields are empty. I'm trying to create fieldArray (dynamic forms):
{fields.map((prize, index) =>
<div key={index} className="fieldArray-container relative border-bottom" style={{paddingTop: 35}}>
<small className="fieldArray-title marginBottom20">Prize {index + 1}
<button
type="button"
title="Remove prize"
className="btn btn-link absolute-link right"
onClick={() => fields.remove(index)}>Delete</button>
</small>
<div className="row">
<div className="col-xs-12 col-sm-6">
<Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/>
<Field name={`${prize}.prizeId`} defaultValue={index} component={Input} type='text'/>
<Field
name={`${prize}.name`}
type="text"
component={Input}
label='Prize Name'/>
</div>
<div className="col-xs-12 col-sm-6">
<Field
name={`${prize}.url`}
type="text"
component={Input}
label="Prize URL"/>
</div>
<div className="col-xs-12">
<Field
name={`${prize}.description`}
type="text"
component={Input}
label="Prize Description" />
</div>
</div>
</div>
)}
解决方案
On redux forms you can call initialize() with an object of values like so:
class MyForm extends Component {
componentWillMount () {
this.props.initialize({ name: 'your name' });
}
//if your data can be updated
componentWillReceiveProps (nextProps) {
if (/* nextProps changed in a way to reset default values */) {
this.props.destroy();
this.props.initialize({…});
}
}
render () {
return (
<form>
<Field name="name" component="…" />
</form>
);
}
}
export default reduxForm({})(MyForm);
This way you can update the default values over and over again, but if you just need to do it at the first time you can:
export default reduxForm({values: {…}})(MyForm);
这篇关于Redux 表单默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
