反应-状态未正确更新

Question

I am using <Select> component, which is one of the Material-ui components to create drop down menu. What I am trying to do is pass the updated state to <Select> component.

I set the value property of the component to "value={ this.state.dropDownField }" .

I also set the onChange property of the <Select> component to "onChange={ this.handleDropdownFieldChange.bind(this) }" .

So when the menu in the dropdown menu has been selected, the handleDropdownFieldChange function will be initiated and update the state to this.setState({ dropDownField: event.target.value }) .

However, that updated state is not properly passed back to the <Select> component.

Could anyone please help me with this?

Here is my code:

 class NewsContainer extends React.Component { state = { dropDownField: '' }; handleDropdownFieldChange = (event) => { this.setState({ dropDownField: event.target.value }); console.log("This is inside the handleDropdownFieldChange"); console.log(this.dropDownField); } displayDropDowns() { return ( <div> <form> <DialogContent> <div> <h3>Advanced Search</h3> </div> <h2>Filter results by</h2> <div className="advanced-search-body"> <div className="advanced-search-drop-down"> <InputLabel>Select Category</InputLabel> <Select value={ this.state.dropDownField } fullWidth onChange={ this.handleDropdownFieldChange.bind(this) } > <MenuItem value="Technology">Technology</MenuItem> <MenuItem value="Business">Business</MenuItem> <MenuItem value="Finance">Finance</MenuItem> <MenuItem value="Startups">Startups</MenuItem> <MenuItem value="Investment">Investment</MenuItem> <MenuItem value="Stocks">Stocks</MenuItem> <MenuItem value="Apps">Apps</MenuItem> </Select> </div> </div> </DialogContent> </form> </div> ); } render() { return ( <div> <div> <h3>Top Headlines</h3> {this.displayDropDowns()} </div> </div> ); } } export default NewsContainer; 

Answer 1

When using material UI, the onChange callback has a different signature than the Vanilla HTML/React:

  handleDropdownFieldChange = (event, index, value) => {
    this.setState({ dropDownField: value });
    console.log("This is inside the handleDropdownFieldChange");
    console.log(this.dropDownField);
  }