标签: redux-form

我一直试图找出管理我的反应形式的最佳方法.我试图使用onChange触发一个动作并用我的表单数据更新我的redux商店.我也试过创建本地状态,当我的表单被提交时,我触发并动作并更新redux存储.

我该如何管理受控输入状态？

我正在尝试使用API​​中的数据填充配置文件表单.不幸的是,在这种情况下,redux-form不想与我合作.出于某种原因,无论我做什么,田地都会空着

由于某种原因,设置固定值而不是从reducer传递的值很好.

也许这是因为我在动作创建者中使用redux-promise进行API调用？我怎么能忍受它并摆脱它.这是我的表单组件.

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import { fetchRoleList, fetchUserData } from '../actions';

class UserEdit extends Component {

    componentWillMount() {
        this.props.fetchRoleList();
        this.props.fetchUserData();
    }

    handleEditProfileFormSubmit(formProps) {
        console.log(formProps);
    }

    getRoleOptions(selected_id) {
        if (!this.props.profile) {
            return <option>No data</option>;
        }

        return this.props.profile.roles.map(role => {
            return <option key={role.role_id} value={role.role_id}>{role.name}</option>;
        });
    }

    renderField(props) {
        const { input, placeholder, label, value, type, meta: { touched, error } } …

我正在使用带有redux形式和材料ui的电子反应样板创建一个上传文件的简单表格.

问题是我不知道如何创建输入文件字段,因为材料ui不支持上传文件输入.

关于如何实现这一点的任何想法？

我没有传递任何特殊的配置设置,也没有设置/或调用Destroy ...但我的状态正在被清理......无论如何要防止这种情况？我需要状态,因为我需要那些数据,而不是我的应用程序.

prev state: I see it in there... via redux-logger
action: redux-form/Destroy
next state: it's gone.

我试图在一个页面上嵌入多个表单时遇到问题.我注意到configForm执行一次,即使页面上有多个表单,这也就是我无法动态生成不同表单名称的原因.

截图显示绑定在一起多个文本字段.

function configForm(){
  const uuid = UUID.generate();

  const config = {
    form:`AddCardForm_${uuid}`,
    fields:['text'],
    validate:validate
  }

  return config;
}

export default reduxForm(configForm(), mapStateToProps, {togglePanelEditMode, addCardToPanel})(CardFormContainer);

如何添加表单以使它们彼此独立？

在进行handleSubmitAjax调用的redux-form 函数中,Ajax中需要一些Redux状态的属性(例如用户ID).

如果我想handleSubmit在表单的组件中定义,这很容易:只需调用mapStateToProps传入我需要的内容,并从this.props我的内容中读取它handleSubmit.

但是,像一个好的React-Redux开发人员一样,我编写了单独的视图组件和容器,因此我的视图组件可以很简单,几乎没有行为.因此,我想在我的容器中定义handleSubmit.

同样,简单 - redux-form被设置为这样做.定义一个onSubmitin mapDispatchToProps,表单将自动调用它.

哦,等等,mapDispatchToProps没有办法访问redux状态.

好的,没问题,我只需要将我需要的道具handleSubmit与表格值一起传递.

嗯,等等,handleSubmit使用这种机制传递任何数据都是不可能的!你得到一个参数,values并且无法添加另一个参数.

这留下了以下没有吸引力的替代方案(我可以验证1和2的工作原理):

1 在表单组件中定义一个提交处理程序,并从那里调用我自己从mapDispatchToProps传入的自定义提交处理函数.这没关系,但要求我的组件知道一些不需要显示表单的redux状态的道具.(此问题不是redux-form独有的.)

dumbSubmit(values)
{
  const { mySubmitHandler, user} = this.props;
  mySubmitHandler(values, user);
}

<form onSubmit={ handleSubmit(this.dumbSubmit.bind(this)) }>

或者,更简洁地说,这可以组合成箭头函数:

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}

然后为了使这个处理程序完全不可知,它可以将整个this.props传递回自定义处理程序:

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props);}

2 在mergeProps中定义onSubmit而不是mapDispatchToProps,因此它可以访问stateProps.Dan Abramov建议不要使用mergeProps(出于性能原因),所以这似乎不是最理想的.

  function mergeProps(stateProps, dispatchProps, ownProps) {
  const { user } …

我的反应代码中有一个问题。

我使用 Material-ui 和 redux-form。我有像这样的选择输入，在改变这个选择后，我应该在 . 我使用 react-form 中的 action 'change' 并为 textfield 设置值。但标签 in 仍然存在。我可以清除或重置 中的值吗？

<Autocomplete
    options={list}
    getOptionLabel={option => option.name}
    onInputChange={onChange}
    onChange={onChangeAutoComplete}
    noOptionsText='??? ????????? ?????????'
    loadingText='????????...'
    openText='???????'
    renderInput={params => (
        <Field
            {...params}
            label={label}
            name={fieldName}
            variant="outlined"
            fullWidth
            component={renderTextField}
            className={classes.textField}
            margin="normal"
        />
    )}
/>

当我使用redux-formv7时,我发现没有办法设置字段值.现在在我form,我有两个select组件.当第一个select组件值发生变化时,第二个值将清晰.

在类渲染中:

<div className={classNames(style.line, style.largeLine)}>
  <div className={style.lable}>site:</div>
  <div className={style.content}>
    <Field
      name="site"
      options={sites}
      clearable={false}
      component={this.renderSelectField}
      validate={[required]}
    />
  </div>
</div>

<div className={classNames(style.line, style.largeLine)}>
  <div className={style.lable}>net:</div>
  <div className={style.content}>
    <Field
      name="net"
      options={nets}
      clearable={false}
      component={this.renderSelectField}
      validate={[required]}
      warning={warnings.net}
    />
  </div>
</div>

现在我添加select更改挂钩,如何更改其他select值

renderSelectField = props => {
  const {
    input,
    type,
    meta: { touched, error },
    ...others
  } = props
  const { onChange } = input
  const _onChange = value => {
    onChange(value)
    this.handleSelectChange({ …

关于redux-form的官方页面和GitHub问题,有多个如何使用initialValues的例子,但我找不到一个专注于解释如何设置initialValues以响应异步源的例子.

我想到的主要情况就像一个简单的CRUD应用程序,用户将编辑一些已经存在的实体.首次打开视图并安装redux-form组件但在呈现组件之前,必须设置initialValues.假设在此示例中,首次装入和呈现组件时,按需加载数据.这些示例显示了基于硬编码值或redux存储状态设置initialValues,但我没有找到关注如何根据异步(如调用XHR或fetch)设置initialValues.

我确信我只是缺少一些基本的东西,所以请指出我正确的方向.

参考文献:

• 初始化表单状态
• 处理表单默认值
• 使用初始数据填充动态表单的正确方法是什么？

这个问题与Redux Form v6.0.0有关(在写这个问题的时候它是v6.0.0-alpha.15).

我怎样才能得到表单验证身份(如pristine,submitting,invalid)从表格组件的外面？

让我举个例子.这是"经典的redux-form"伪结构:

<Form(MyExampleForm)>
    <MyExampleForm>
        <input name="title" ... />
        <submit-button />

... <submit-button>在JSX中的位置如下:

<button type="submit" disabled={pristine || submitting || invalid} >Save</button>

但是在我的应用程序中,我的提交按钮必须位于表单之外,放在应用程序的不同位置(假设在应用程序标题中,位于整个应用程序的顶部).

1. 我怎样才能得到这些pristine,submitting,invalid从终极版表格之外？(如果可能的话,没有真正令人讨厌的黑客:-))
2. 我该如何提交该表格？