【问题标题】:Update field value from predefined value redux-form从预定义的值 redux-form 更新字段值
【发布时间】: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


【解决方案1】:

好的。这就是我最终的结果。我正在阅读 cmets 中建议的帖子: How to programatically set Redux-Form Field value 但是这个解决方案有点奇怪,因为您正在通过 if 语句进行操作。我想出了这样的事情:在mapStateToProps中,我使用了以redux形式描述的对象属性作为initialValue示例:

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

【讨论】:

    猜你喜欢
    • 2018-02-09
    • 1970-01-01
    • 1970-01-01
    • 2023-03-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-21
    • 1970-01-01
    相关资源
    最近更新 更多