reactjs - 以 redux 形式设置字段值

Question

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

所以结构是这样的。1. 具有形式的组件2. 字段组件。

现在我用谷歌搜索并发现了一些可以更新该字段的东西，但无法做到这一点。我尝试过什么1. 在值字段中添加如下所示的状态。不起作用。

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

尝试了调度但无法使用它。由于没有调度 i prop 类型而出现错误

this.props.dispatch(change('form', 'accountno', '测试值'));

尝试了 this.props.fields 但与 props 类型中的字段相同。

它应该可以使用 2 或 3，但无法找到在哪里添加它们。请让我知道如何使用这些或任何其他方式。

Answer 1

使用redux-form时，不需要直接将值设置到字段中。您可以使用initialize方法来填充表单。或者将 initialValues 作为对象的属性传递给 redux 以将状态映射到 props。另一种方法是使用 redux-form 中的 change 函数单独设置值。为了使其正常工作，您需要使用 react-redux 中的 connect 来包装您的组件。它将 dispatch 方法嵌入到您的 props 中。

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);