<ArrayInput> 和 React Admin 的 <SimpleFormIterator> 生成错误的输出答案

【问题标题】：<ArrayInput> with <SimpleFormIterator> of React Admin generate wrong output<ArrayInput> 和 React Admin 的 <SimpleFormIterator> 生成错误的输出
【发布时间】：2020-02-11 18:53:21
【问题描述】：

以下：

<ArrayInput source="slotCaps" label="Schedule Caps">
    <SimpleFormIterator>
        <Box display="flex">
            <Box mr="0.5em">
                <NumberInput source="cap" step={1}/>
            </Box>
            <Box ml="0.5em">
                <SelectInput
                    source="period"
                    choices={[
                        {id: "0", name: "Day"},
                        {id: "1", name: "Week"},
                        {id: "2", name: "Month"}
                    ]}
                />
            </Box>
        </Box>
    </SimpleFormIterator>
</ArrayInput>

我明白了：

{
    "name": "test 5",
    "description": "test 5",
    "slotCaps": [
        {},
        {}
    ],
    "cap": 1,
    "period": "0"
}

我期待：

{
    "name": "test 5",
    "description": "test 5",
    "slotCaps": [
        {"cap": 1, "period": "0"},
    ],
}

知道我做错了什么吗？有人可以解释一下我必须改变什么才能获得第二个变体吗？谢谢。

编辑

不知道为什么，但出于某种原因，这可行：

<ArrayInput source="slotCaps" label="Schedule Caps">
    <SimpleFormIterator>
        <NumberInput source="cap" step={1}/>
            <SelectInput
                source="period"
                choices={[
                    {id: 1, name: "Day"},
                    {id: 2, name: "Week"},
                    {id: 3, name: "Month"}
                ]}
                optionValue={"name"}
            />
    </SimpleFormIterator>
</ArrayInput>

如果有人知道如何使第一个变体工作，请提供您的意见。我需要正确格式化字段，看起来使用 Box 元素是实现这一目标的最佳方式。

谢谢。

【问题讨论】：

标签： react-admin

【解决方案1】：

Input 组件必须是 SimpleFormIterator 的第一级子级，而不是嵌套的。

如果您希望使用嵌套的 Input 组件，这对于使用 material-ui Box 元素正确显示表单很有用，您需要使用 FormDataConsumer ，如下所示：

    <ArrayInput source="slotCaps" label="Schedule Caps">
      <SimpleFormIterator>
        <FormDataConsumer>
          {({ getSource, scopedFormData }) => {
            return (
              <Box display="flex">
                <Box mr="0.5em">
                  <NumberInput
                    source={getSource("cap")}
                    record={scopedFormData}
                    step={1}
                  />
                </Box>
                <Box ml="0.5em">
                  <SelectInput
                    source={getSource("period")}
                    record={scopedFormData}
                    choices={[
                      { id: "0", name: "Day" },
                      { id: "1", name: "Week" },
                      { id: "2", name: "Month" },
                    ]}
                  />
                </Box>
              </Box>
            );
          }}
        </FormDataConsumer>
      </SimpleFormIterator>
    </ArrayInput>

然后，对于每个 Input 组件，您只需在 source prop 中添加 getSource 并将 scopedFormData 添加到 record prop。

【讨论】：

【解决方案2】：

从 NumberInput 和 SelectInput 中删除源

【讨论】：