使用 fieldarray 创建 redux 形式的动态数据驱动输入

Question

我正在构建一个表单，其中的输入、标签和简要说明都是基于数据库中的数据创建的。例如：

settings = [
{
  name: Setting_Name_Enabled,
  groupType: "setting1",
  labelText: "Setting Name Enabled",
  description: "This setting enables something",
  inputType: "checkbox",
  value: "True"
},
{
  name: Setting_Name_Days,
  groupType: "setting1",
  labelText: "Setting Name In Days",
  description: "This setting will be triggered every N days",
  inputType: "number",
  value: "15"
}

我想根据这些记录及其属性动态构建我的表单。我有以下内容但它不起作用，因为 setting.inputType 和 setting.labelText 似乎没有被拾取。如果我将输入类型硬编码为文本，则所有内容都显示出来，而不是标签或我试图访问对象属性的任何内容。

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

const renderSettings = ({ fields, meta: { touched, error, submitFailed } }) => (
  <div>
    {fields.map((setting, index) => (
      <Field
        name={`${setting}.value`}
        type={ setting.inputType }
        component={renderField}
        label={ setting.labelText }
      />
    ))}
  </div>
);

Answer 1

代码的问题是 fields.map 中的 setting 对象无法访问设置数组中对象的属性。

您可以使用 Redux 表单的 fields.get(index) 函数获取值。

最终代码看起来像：-

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

const renderSettings = ({ fields, meta: { touched, error, submitFailed } }) => (
  <div>
    {fields.map((setting, index) => (
      <Field
        name={`${setting}.value`}
        type={fields.get(index).inputType}
        component={renderField}
        label={fields.get(index).labelText}
      />
    ))}
  </div>
);

Working Example

使用 fieldarray 创建 redux 形式的动态数据驱动输入

create redux-form dynamic data driven input using fieldarray

reactjs

redux-form