如何获取 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} >

Answer 4

我遇到了同样的问题，我没有看到关于这个的文档，但是源代码中有线索，并且测试了这个作品

          <ArrayInput ...>
            <SimpleFormIterator ... >
              <SimpleFormIteratorItemContext.Consumer>{({ index }) => {
                return <div>index:{index}</div>
              }}</SimpleFormIteratorItemContext.Consumer>

Answer 5

万一其他人遇到这个问题，我是如何解决类似问题的。

A

FunctionField

获取渲染道具中的记录和来源。

对于数组，源看起来像

books.0

和

books.1

<SimpleFormIterator>
  <FunctionField render={(record, source) => {
    const lastPeriodBreak = source.lastIndexOf('.') + 1;
    const index = Number(source.substring(lastPeriodBreak));
    return index;
  }} />
</SimpleFormIterator>

编辑：刚刚注意到

getItemLabel

上还有一个新的

SimpleFormIterator

https://marmelab.com/react-admin/SimpleFormIterator.html#getitemlabel