React i setState i autouzupełnianie - reactjs, web-component, material-ui

Używam reagowania i materiałów. To jest mój komponent

`` `

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>

)

}
}

Ciągle otrzymuję setState nie jest zdefiniowany, kiedy wpisuję coś wewnątrz autouzupełniania. Gdzie mogę pójść źle? Stałem także przed tym problemem, gdy próbowałem zaimportować karty

Odpowiedzi:

Musisz się związać z „this"

Ta linia stanowi problem:

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

Zmień na:

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

Ponieważ już używasz ES6, możesz to zrobić

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

wtedy nie musisz tego robić -> this.handleUpdateInput = this.handleUpdateInput.bind(this); w twoim konstruktorze