Question

使用redux-form FieldArray允许用户在不同的日子为他们的商店创建开放时间块。

正常工作以添加它们，但是一旦创建，需要在“编辑商店开放时间”部分加载一个表单，其中包含最初创建的数据，以便稍后进行更改。

无法弄清楚如何循环返回的信息。以下工作要创建，但我需要解决方案来拉入并将服务块打印到字段集中，以便用户可以编辑并重新提交。

    renderGroups = ({ fields, meta: { touched, error } }) => {
      return (
        <div>
          {fields.map((service, index) =>
            <div className="service-type-group" key={index}>
              <h4>{this.stringifyServiceNumbers(index + 1)} Service</h4>
              <button
                type="button"
                className="remove-button"
                onClick={() => fields.remove(index)}>Remove
              </button>
              <div className="field-group third">
                <Field
                  name={`${service}.day`}
                  component={SelectField}
                  floatingLabelText="Day of week"
                  className="textfield">
                    <MenuItem value={1} primaryText="Monday" />
                    <MenuItem value={2} primaryText="Tuesday" />
                    <MenuItem value={3} primaryText="Wednesday" />
                    <MenuItem value={4} primaryText="Thursday" />
                    <MenuItem value={5} primaryText="Friday" />
                    <MenuItem value={6} primaryText="Saturday" />
                    <MenuItem value={0} primaryText="Sunday" />
                </Field>
                <Field
                  name={`${service}.fromTime`}
                  component={TimePicker}
                  defaultValue={null}
                  floatingLabelText="From"
                  className="textfield"
                />
                <Field
                  name={`${service}.untilTime`}
                  component={TimePicker}
                  defaultValue={null}
                  floatingLabelText="To"
                  className="textfield"
                />
              </div>
              <div className="field-group half">
                <Field
                  name={`${service}.service_type`}
                  component={SelectField}
                  floatingLabelText="Service type"
                  className="textfield">
                  <MenuItem value={0} primaryText="First-come first-served" />
                  <MenuItem value={1} primaryText="Appointment" />
                </Field>
              </div>
              <div className="field-group sentence-inline">
                <Field
                  name={`${service}.peoplePer`}
                  type="number"
                  component={TextField}
                  label="Number of people per timeslot"
                  className="textfield"
                />
                <p>people are allowed every</p>
                <Field
                  name={`${service}.timeslotDuration`}
                  component={SelectField}
                  className="textfield">
                  <MenuItem value={0} primaryText="5 minutes" />
                  <MenuItem value={1} primaryText="10 minutes" />
                  <MenuItem value={2} primaryText="15 minutes" />
                  <MenuItem value={3} primaryText="30 minutes" />
                  <MenuItem value={4} primaryText="60 minutes" />
                  <MenuItem value={5} primaryText="All day" />
                </Field>
                <p>.</p>
              </div>
            </div>
          )}
          <button
            type="button"
            className="action-button"
            onClick={() => fields.push({})}>Add Service
          </button>
          {touched && error && <span>{error}</span>}
        </div>
      );
    }

通过从ComponentWillMount上的api获取食品室数据，可以正确填充所有其他字段。只需要FieldArray信息和标记。

非常感谢帮助！

Answer 1

传递给initialValues（或通过调度的initialize() action）的值需要与redux-form从头开始创建数组时所提供的结构相同。所以，从您的代码判断，我会说：

[
  { 
    day: 1, 
    fromTime: '10:00', 
    untilTime: '11:00', 
    service_type: 1, 
    peoplePer: 3,
    timeslotDuration: 4
  }
  { 
    day: 2, 
    fromTime: '12:00', 
    untilTime: '13:00', 
    service_type: 0, 
    peoplePer: 2,
    timeslotDuration: 2
  }
]

我已经在这里为您快速编写了一个简单的示例，因此您可以看到它正常工作：InitializeFromStateForm.js

如何使用redux-form从状态初始化FieldArray？

1 个答案: