如何获取 SimpleFormIterator 的索引答案

【问题标题】：How to get index of SimpleFormIterator如何获取 SimpleFormIterator 的索引
【发布时间】：2018-11-18 06:29:59
【问题描述】：

我想访问 simpleFormIterator 的索引。我怎样才能做到这一点？我有一个类似的代码我正在尝试在 SelectInput 组件中访问它

<ArrayInput source='services'>
    <SimpleFormIterator>
        <TextInput source='id' label="Service Name" validate={this.RequiredAndRegex} />
        <FormDataConsumer>
            {({ formData, ...rest }) => 
                <ArrayInput source='parametervalues'>
                    <SimpleFormIterator>
                        <TextInput source='id' label="Parameter Values" validate={this.RequiredAndRegex} />
                        <SelectInput label="Paramater Type"
                            source="id"
                            choices={this.getParameters(formData.services[index].servicetype)}
                            optionText={optionRenderer}
                            optionValue="id" />
                    </SimpleFormIterator>
                </ArrayInput>
            }
        </FormDataConsumer>
    </SimpleFormIterator>
</ArrayInput>

【问题讨论】：

标签： admin-on-rest react-admin

【解决方案1】：

您可以在那里制作一个装饰器并提取您输入的索引。

// Make Decorator
const withDynamicChoices = BaseComponent => {
    return class extends Component {
        getChoices = () => {
            // console.log(this.props); 
            // grab your index here...
            const formData = this.props.formData;
            return formData.services[this.props.index].servicetype;
        }
        
        render() {
           return <BaseComponent
                  {...this.props}
                  choices={ this.getChoices() }
                  />;
        }
    }
}

// Decorate original Input
const SelectInputW = withDynamicChoices(SelectInput);

// Use original input as <SelectInputW formData={formData} >

【讨论】：

【解决方案2】：

SimpleFormIterator 实际上是在第 137 行传递索引。(https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/form/SimpleFormIterator.js)。
但是，您将无法在没有孩子的情况下访问它，就像您在示例中尝试的那样。

如果您想访问它，您必须创建一个自定义子项（在您的情况下为 SelectInput）。

我通常使用 redux-form 和 material-ui 编写一个完整的自定义表单，然后将值分派给 dataProvider。

【讨论】：

【解决方案3】：

SimpleFormIterator 无法做到这一点。你必须自己写。我建议使用它作为基础 (https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/form/SimpleFormIterator.js) 并在克隆 L114 的输入时传递索引

【讨论】：

您使用 SimpleFormIterator 成功创建了组件吗？如果是这样，你有一个例子吗？我无法让它工作。