admin-on-rest - 如何获取 SimpleFormIterator 的索引

Question

我想访问 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>

Answer 1

这是不可能的SimpleFormIterator。你必须自己写。我建议将其用作基础（https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/form/SimpleFormIterator.js）并在克隆输入时传递索引在 L114

Answer 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。

Answer 3

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

// 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} >