使用 material-ui 未定义自动完成功能答案

【问题标题】：autocomplete is undefined with material-ui使用 material-ui 未定义自动完成功能
【发布时间】：2017-05-15 16:18:06
【问题描述】：

我在 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;

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这是一个错字，您正在导入 Autocomplete 并使用 AutoComplete。

使用这些方式import AutoComplete:

import { AutoComplete } from 'material-ui';

或者

import AutoComplete from 'material-ui/AutoComplete';

更新：

要渲染 material-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>
}

使用这个：

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;

注意： MuiThemeProvider 不需要包含在每个组件中，您可以在主页中使用它，然后您可以在任何组件中使用任何material-ui组件。

【讨论】：

天哪！非常感谢。现在我收到“Uncaught TypeError: Cannot read property 'prepareStyles' of undefined”的错误
我认为错误来自其他组件，因为在这一部分中，您没有使用prepareStyles，请检查您使用它的地方。我猜那是binding issue，在某个地方你忘了bind 任何方法。
我没有使用其他组件。
你在这个组件中使用prepareStyles吗？
在material-ui文件中。

【解决方案2】：

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

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

因为新的 1.5 主题可以通过 props 获得，而旧的主题可以通过上下文获得，因此您需要将两者都包含在内，以便 AutoComplete 能够引用旧主题。除非您确实需要旧库中的某些内容，例如 AutoComplete 小部件，否则我不会这样做。

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

【讨论】：