繁体   English   中英

从预定义值redux-form更新字段值

[英]Update field value from predefined value redux-form

如何更新从我的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
}

好。 这就是我最终得到的。 我正在阅读评论中的帖子: 如何以编程方式设置Redux-Form字段值,但是此解决方案有点奇怪,因为您正在通过if语句进行操作。 我想出了类似这样的东西:在mapStateToProps中,我使用了以redux形式描述的对象属性作为initialValue示例:

Function mapStateToProps(state){
var data = _.pick(state.myprops, "name" );
return{
    myprops: state.myprops,
    initialValue: {
        'nameOfMyField': data.name.fieldname
    } 
} 
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM