Material ui 使用redux表单材质ui自动完成的redux表单字段

Material ui 使用redux表单材质ui自动完成的redux表单字段,material-ui,redux-form,Material Ui,Redux Form,我正在研究redux表单中的自动完成字段,并找到了此解决方案。我认为这将有助于使用material ui或redux表单material ui的用户,并希望消除muiTheme错误。对于我的案例,我发现使用react select很简单 {/* Libraries you need */} import {AutoComplete as MUIAutoComplete} from 'material-ui' import { AutoComplete } from 'redux-form-ma

我正在研究redux表单中的自动完成字段,并找到了此解决方案。我认为这将有助于使用material ui或redux表单material ui的用户,并希望消除muiTheme错误。对于我的案例,我发现使用react select很简单

{/* Libraries you need */}

import {AutoComplete as MUIAutoComplete} from 'material-ui'
import { AutoComplete } from 'redux-form-material-ui'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import { reduxForm, Field, Fields, formValueSelector, change } from 'redux-form'


{/* redux-form Field component for Text Input using AutoComplete */}

<MuiThemeProvider>
   <Field
    name="searchByText"
    label="Search Suggestions"
    component={AutoComplete}
    floatingLabelText="Search By Suggestions"
    openOnFocus
    filter={MUIAutoComplete.fuzzyFilter}
    dataSource={searchSuggestionList}        //array list of suggestions
    onChange={this.handleSearchByTextChange} //handle the onChange event by handleSearchByTextChange func
    onBlur={() => {}}
  />
</MuiThemeProvider>

当您将redux表单材质ui库与redux表单字段一起使用时,是否可以详细说明。就像我使用的自动完成下拉建议和文本字段。它将抛出一个错误,说明需要博物馆。在材质ui库的{AutoComplete}中设置为必需的。为此,我用MuiThemeProvider包装了字段,正如您在代码中看到的那样。这将为材质ui提供默认的交互方式。后来,我工作的项目范围发生了变化,所以我改用了react select。但是这里提供了这个解决方案,以便感兴趣的人可以研究它。