React - 状态没有正确更新答案

【问题标题】：React - State is not updating properlyReact - 状态没有正确更新
【发布时间】：2018-04-16 09:29:05
【问题描述】：

我正在使用<Select> 组件，它是Material-ui 组件之一，用于创建下拉菜单。我想要做的是将更新的状态传递给<Select> 组件。

我将组件的 value 属性设置为"value={ this.state.dropDownField }"。

我还将<Select> 组件的onChange 属性设置为"onChange={ this.handleDropdownFieldChange.bind(this) }"。

所以当下拉菜单中的菜单被选中时，handleDropdownFieldChange函数将被启动并更新状态为this.setState({ dropDownField: event.target.value })。

但是，更新后的状态没有正确地传回<Select>component。

有人可以帮我解决这个问题吗？

这是我的代码：

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;

【问题讨论】：

不需要绑定this.handleDropdownFieldChange函数，因为是箭头函数
@Carloluis 感谢您的评论。那仍然不能解决我的问题。您知道解决此问题的方法吗？

标签： javascript reactjs

【解决方案1】：

使用材质 UI 时，onChange 回调的签名与 Vanilla HTML/React 不同：

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

【讨论】：