Question

我有带有下拉列表和文本字段的redux表单。在下拉列表更改时，我必须更新其他字段。其他字段使用自定义组件示例

所以结构就像。 1.具有形式的组件 2.现场部分。

现在我用谷歌搜索并发现很少的东西来更新该领域但是无法做到。我尝试了什么 1.在字段中添加状态，如下所示。不起作用。

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

尝试调度但无法使用它。没有派遣的错误我支持类型

this.props.dispatch（更改（＆＃39;表格＆＃39;，＆＃39; accountno＆＃39;，＆＃39;测试值＆＃39;））;
尝试过this.props.fields，但同样不是道具类型中的字段。

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

Answer 1

使用redux-form时，您不需要将值直接设置到字段中。您可以使用方法initialize填充表单。或initialValues作为传递给redux的对象的属性，以将状态映射到道具。另一种方法是使用change中的函数redux-form单独设置值。为了使其工作，您需要使用connect 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

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

然后您需要set enableReinitialize to true以便在状态发生变化时更新字段：

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

现在，每次更改state.accountno时，表单字段都会更新。

以redux形式在字段中设置值

2 个答案: