1

我想要一个自定义输入组件

1) 有一个自动完成组件，允许选择“字段”资源

2) 选择“字段”后，根据所选的“字段”类型填充另一个 SelectInput。

我目前拥有的是：

    const renderAutoComplete = ({ input, meta, ...rest }) => {
        return (
            <AutoComplete {...rest} />
        )
    }


    render () {
        return (
            <div>
                <div>
                    <Field
                        component={renderAutoComplete}
                        name={this.props.fieldSource}
                        hintText="Field"
                        dataSource={this.state.fields}
                        dataSourceConfig={{ text: 'title', value: 'id' }}
                        openOnFocus={true}
                        filter={AutoComplete.caseInsensitiveFilter}
                        onNewRequest={(chosen) => this.handleNewRequest(chosen)}
                    />
                </div>
                <div>
                    <Field
                        component={SelectInput}
                        label="Type-dependent"
                        name={this.props.typeSource}
                        choices={this.state.availableChoices}
                    />
                </div>
            </div>
        )
    }

就 SelectInput 的数量而言，这非常有效，如果我在创建表单中使用它，我还会获得随请求发送的 SelectInput 的值。

不幸的是，“字段”值未包含在请求中。

我假设我在这里需要一个“真正的” AutocompleteInput。所以我做了以下事情：

                    <Field
                        component={AutocompleteInput}
                        name={this.props.fieldSource}
                        hintText="Feld"
                        choices={this.state.fields}
                        dataSourceConfig={{ text: 'title', value: 'id' }}
                        optionText="title"
                        optionValue="id"
                        filter={AutoComplete.caseInsensitiveFilter}
                        onNewRequest={(chosen) => this.handleNewRequest(chosen)}
                    />

有了这个，我在请求中发送了“字段”值，但onNewRequest-callback 永远不会执行。因此，另一个 SelectInput 没有收到我可以发送的任何值。

我查看了 AutocompleteInput 文件所在的 node_modules 文件夹，根据它们应该可以在此处使用此回调。

这是一个错误还是我在这里做错了什么？

编辑关于 wesley6j 的评论：

<Field
    name="field"
    component={AutocompleteInput}
    choices={choices}
    optionText="title"
    optionValue="id"
    filter={AutoComplete.caseInsensitiveFilter}
    options={{
        onNewRequest: (chosen, index) => console.log(chosen)
    }}
/>

...这会记录到控制台，但我的值也没有在请求中设置。您能否将我指向文档或源代码的正确部分，以清除我在这里必须做的事情？

4

0 回答 0