reagieren und setState und Autocomplete

Question

Im mit Reaktion und Material ui. Dies ist meine Komponente

`` `

import React from 'react'; 


import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; 

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import AutoComplete from 'material-ui/AutoComplete'; 
// the light theme 
const lightMuiTheme = getMuiTheme(lightBaseTheme); 

// the autocomplete component width 
const Preferencestypeahead = { 
maxWidth: 600, 
position:'relative', 
margin:'auto' 
} 


export default class Preferences extends React.Component { 


constructor(props) { 
super(props); 
this.handleUpdateInput = this.handleUpdateInput.bind(); 
this.state = { 
    dataSource: [], 
}; 
} 

handleUpdateInput(value){ 
this.setState({ 
    dataSource: [ 
    value, 
    value + value, 
    value + value + value, 
    ], 
}); 
}; 

render() { 
return (


    <div> 
     <MuiThemeProvider muiTheme={lightMuiTheme}> 

        <section style={Preferencestypeahead}> 
          <AutoComplete 
           hintText="Type" 
           dataSource={this.state.dataSource} 
           onUpdateInput={this.handleUpdateInput.bind(this)} 
           floatingLabelText="Search" 
           fullWidth={true} 
          />       
        </section> 

     </MuiThemeProvider> 
    </div> 

    ) 

    } 
    } 

Ich erhalte setState nicht definiert ist, wenn ich etwas in der die automatische Vervollständigung geben. Wo könnte ich falsch liegen? Ich habe auch dieses Problem konfrontiert, als ich versuchte, die Tabs als auch

Answer 1

Sie auf „this“

diese Linie binden importieren müssen das Problem:

this.handleUpdateInput = this.handleUpdateInput.bind(); 

Ändern Sie es an:

this.handleUpdateInput = this.handleUpdateInput.bind(this); 

Answer 2

Da Sie bereits ES6 Verwendung könnte man einfach tun

... 
onUpdateInput={(val) => this.handleUpdateInput(val)} 
... 

dann brauchen Sie nicht, dies zu tun ->this.handleUpdateInput = this.handleUpdateInput.bind(this); in Ihrem Konstruktor