【发布时间】:2018-05-03 17:44:28
【问题描述】:
如何更新从我的 redux 商店预定义的 redux 表单字段组件值?我在字段中看到了我的值,但我无法输入来更新它们。我需要触发 onChange 事件,但我不知道如何。也许是某种设置 initialValue 的方法?我的包文件:
"redux": "3.7.2",
"redux-form": "^7.1.2",
"react": "16.0.0",
PS。我想使用 defaultValue 但自从 redux-form 5.0.0 后它被删除了。
代码:
import React,{Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import {fetchCeoData} from '../../actions/CMS';
class CEOForm extends Component{
constructor(props) {
super(props);
this.renderTextarea = this.renderTextarea.bind(this);
}
componentDidMount(){
this.props.fetchCeoData();
}
submit(values){
console.log(values);
}
componentWillReceiveProps(nextProps){
console.log(nextProps);
}
renderTextarea({_id, title, description, content, input}){
return(
<div key={_id} className="cms-form-row">
<label htmlFor={title}>{description}</label>
<textarea {...input} value={content} rows="6" cols="50"></textarea>
</div>
)
}
render(){
return(
<section id="ceo-form">
<h1 className="cms-section-header">Narzędzia CEO</h1>
<div className="ceo-form-wrapper">
<form onSubmit={this.props.handleSubmit(this.submit)}>
{this.props.ceoData.map((item) => {
return <Field
name={item.title}
key={item._id}
title={item.title}
content={item.content}
description={item.description}
component={this.renderTextarea}
/>
})}
<button type="submit">Wyślij !</button>
</form>
</div>
</section>
)
}
}
function mapStateToProps(state){
return{
ceoData: state.ceoData
}
}
function loadData(store) {
return store.dispatch(fetchCeoData());
}
CEOForm = connect(mapStateToProps, {fetchCeoData})(reduxForm({form: 'ceo', enableReinitialize : true})(CEOForm));
export default{
loadData,
component: CEOForm
}
【问题讨论】:
-
看看这个答案。我想这就是你要找的stackoverflow.com/questions/45230531/…
-
我不明白你想要什么,你的问题是,我怎样才能初始动态输入名称?
-
也许我用错了词。我从我的 redux 存储中预定义了值,我想通过将其放置在字段中、编辑并触发我的 API 的操作来更新它
-
@CacheGhost 请检查我上面的 cmets 中的答案,它确实回答了如何以编程方式更新 redux 表单值
标签: reactjs redux redux-form