以redux形式在字段中设置值

Question

我有redux形式有下拉列表和文本字段.在下拉列表更改时,我必须更新其他字段.其他字段使用自定义组件示例

所以结构就像.1.具有形式2的组件.字段组件.

现在我用谷歌搜索,发现很少的东西来更新该领域,但无法做到这一点.我尝试了什么1.在字段中添加状态,如下面的值.不行.

<Field name="accountno" value="this.state.accountno" component={InputText} placeholder="Number" />

2. 尝试调度但不能使用它.没有派遣的错误我支持类型

   this.props.dispatch(change('form','accountno','test value'));

3. 尝试过this.props.fields,但同样不是道具类型中的字段.

它应该使用2或3但不能找到添加它们的位置.请告诉我如何使用这些或任何其他方式.

Answer 1

使用时redux-form,您无需将值直接设置到字段中.您可以使用该方法initialize填充表单.或者initialValues作为对象的属性传递redux给地图状态到道具.另一种方法是使用函数changefrom 单独设置值redux-form.为了使其工作,您需要使用connectfrom 包装组件react-redux.它将dispatch方法嵌入到您的道具中.

import React, { Component } from 'react';
import { reduxForm, Field, change } from 'redux-form';
import { connect } from 'react-redux';

class Form extends Component {
  componentDidMount() {
    this.props.initialize({ accountno: 'some value here' });
    // set the value individually
    this.props.dispatch(change('myFormName', 'anotherField', 'value'));
  }

  render() {
    return (
      <form onSubmit={...}>
        ...
        <Field name="accountno" component={InputText} placeholder="Number" />
        <Field name="anotherField" component={InputText} />
      </form>
    )
  }
}

Form = reduxForm({ 
  form: 'myFormName' 
})(Form);

export default connect(state => ({ 
  // alternatively, you can set initial values here...
  initialValues: {
    accountno: 'some value here'
  } 
}))(Form);

Answer 2

刚刚遇到了这个问题.解决方案是initialValues在juliobetta的答案中使用,但关键是将值设置为变量,例如state.blah.

然后,您需要设置enableReinitialize为true在状态更改时更新字段:

export default connect(state => ({ 
  initialValues: {
    accountno: state.accountno,
  },
  enableReinitialize: true,
}))(Form);

现在,每次更改时state.accountno,表单字段都将更新.