React und setState und Autocomplete - Reaktjs, Webkomponente, Material-Ui

Ich benutze reagieren und Material ui. Das 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 bekomme immer setState ist nicht definiert, wenn ich irgendetwas in der Autovervollständigung eingebe. Wo könnte ich falsch liegen? Dieses Problem trat auch auf, als ich versuchte, die Registerkarten ebenfalls zu importieren

Antworten:

Sie müssen binden an "this"

Diese Zeile ist das Problem:

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

Ändere es zu:

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

Da Sie bereits ES6 verwenden, können Sie dies einfach tun

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

dann brauchst du das nicht -> this.handleUpdateInput = this.handleUpdateInput.bind(this); in Ihrem Konstruktor