Reagire e impostareState e completamento automatico: reactjs, web-component, material-ui

Sto usando reagire e materiale ui. Questo è il mio componente

`` `

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>

)

}
}

Continuo a ottenere setState non è definito quando digito qualcosa all'interno del completamento automatico. Dove potrei andare storto? Ho anche affrontato questo problema quando ho provato a importare le schede pure

risposte:

Devi legare a "this"

Questa linea è il problema:

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

Cambiarlo in:

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

Dal momento che stai già usando ES6, puoi farlo

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

allora non hai bisogno di fare questo -> this.handleUpdateInput = this.handleUpdateInput.bind(this); nel tuo costruttore