Reactjs 未使用材质ui定义自动完成

我在jsx文件中有以下代码，但出现错误：

未捕获引用错误：未定义自动完成

据我所见，它应该工作正常，代码：

import React, {Component} from 'react';
import { Autocomplete }   from 'material-ui';

class MaterialUIAutocomplete extends Component {
  constructor(props) {
    super(props);
    this.onUpdateInput = this.onUpdateInput.bind(this);
    this.state = {
      dataSource : [],
      inputValue : ''
    }
  }

  onUpdateInput(inputValue) {
  }

  render() {
    return <AutoComplete
            dataSource    = {this.state.dataSource}
            onUpdateInput = {this.onUpdateInput} />
  }
}

export default MaterialUIAutocomplete;

import React，{Component}来自'React'；
从“材料ui”导入{Autocomplete}；
类MaterialUtoComplete扩展了组件{
建造师（道具）{
超级（道具）；
this.onUpdateInput=this.onUpdateInput.bind（this）；
此.state={
数据源：[]，
输入值：“”
}
}
ONUpdate输入（inputValue）{
}
render（）{
返回
}
}
导出默认物料自动完成；

这是一个输入错误，您正在导入

自动完成

并使用

自动完成

使用以下方法导入自动完成功能：

import { AutoComplete } from 'material-ui';

或

更新：

要呈现材质ui组件，我们需要添加默认主题和样式，在组件中包括以下行，如下所示：

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
const muiTheme = getMuiTheme({});

然后在

MuiThemeProvider

内呈现

AutoComplete

：

render() {
    return <MuiThemeProvider muiTheme={muiTheme}>
              <AutoComplete
                  dataSource    = {this.state.dataSource}
                  onUpdateInput = {this.onUpdateInput} />
           </MuiThemeProvider>
}

render（）{
返回
}

使用以下命令：

import React, {Component} from 'react';
import AutoComplete from 'material-ui/AutoComplete';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
const muiTheme = getMuiTheme({});

class MaterialUIAutocomplete extends Component {
    constructor(props) {
        super(props);
        this.state = {
          dataSource : [],
          inputValue : ''
        }
        this.onUpdateInput = this.onUpdateInput.bind(this);
    }

    onUpdateInput(inputValue) {
    }

    render() {
        return <MuiThemeProvider muiTheme={muiTheme}>
                  <AutoComplete
                      dataSource    = {this.state.dataSource}
                      onUpdateInput = {this.onUpdateInput} />
             </MuiThemeProvider>
    }
}

export default MaterialUIAutocomplete;

import React，{Component}来自'React'；
从“物料界面/自动完成”导入自动完成；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
const muiTheme=getMuiTheme（{}）；
类MaterialUtoComplete扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
数据源：[]，
输入值：“”
}
this.onUpdateInput=this.onUpdateInput.bind（this）；
}
ONUpdate输入（inputValue）{
}
render（）{
返回
}
}
导出默认物料自动完成；

---

注意：

MuiThemeProvider

不需要包含在每个组件中，您可以在主页中使用它，然后您可以在任何组件中使用任何材质ui组件。

这对我来说似乎是一个迁移问题-您想使用材质ui 0.x自动完成，但是您已经安装了新的材质ui v1.x。 因此，您需要遵循迁移步骤，为了使用任何v0.x组件，请将其放在创建/声明主题的任何位置：

<MuiThemeProvider theme={theme}>
 <V0MuiThemeProvider muiTheme={themeV0}>
   {/*Components*/}
 </V0MuiThemeProvider>

{/*组件*/}

因为新的1.5主题是通过道具提供的，旧的主题是通过上下文提供的，所以您需要同时包含这两个主题，以便AutoComplete能够引用旧主题。除非您真的需要旧库中的一些东西，比如自动完成小部件，否则我不会这么做

---

https://material-ui.com/guides/migration-v0x/

哦，孩子！非常感谢你。现在我得到了错误“UncaughtTypeError:无法读取未定义的属性'prepareStyles'”我认为错误来自其他组件，因为在这部分中，您没有使用

prepareStyles

，请检查您使用它的位置。我猜这是

绑定问题

，您忘记了

绑定

任何方法。我没有使用其他组件。您是否在该组件中使用

prepareStyles

？它在物料ui文件中。

<MuiThemeProvider theme={theme}>
 <V0MuiThemeProvider muiTheme={themeV0}>
   {/*Components*/}
 </V0MuiThemeProvider>