Question

我在jsx文件中有以下代码，我收到错误：

未捕获的ReferenceError：未定义自动完成

从我看到它应该工作正常，代码：

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;

Answer 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({});

然后在AutoComplete内呈现MuiThemeProvider：

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组件。

Answer 2

在我看来，这是一个迁移问题-您想使用material-ui 0.x自动完成功能，但是您已经安装了新的material-uiv1.x。因此，您需要执行“迁移”步骤，然后才能使用任何v0.x组件，请将其放置在创建/声明主题的位置：

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

由于新的1.5主题可通过props获得，而旧的1.5主题可通过上下文获得，因此您需要同时包含两个内容，以便AutoComplete能够引用旧的主题。除非您确实需要旧库中的东西，例如AutoComplete小部件，否则我不会这样做。

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

自动完成未使用material-ui定义

2 个答案: