ReactJS下拉框点击清除按钮后状态更新但UI未重置问题求助

嘿，我看了你的代码，马上就找到问题所在啦！你遇到的问题是因为对React中select组件的受控/非受控写法理解有点偏差~

问题原因 #

你给select用了defaultValue属性来绑定state.value，但defaultValue是非受控组件的初始化属性——它只会在组件第一次渲染的时候生效，之后不管你的state怎么更新，select都不会跟着同步UI变化。而你需要的是让select的状态完全由state控制，这时候得用受控组件的写法，也就是用value属性来绑定状态。

另外还有个小细节：你初始的state.value是undefined，但点击清除按钮后设置的是空字符串""，两者不匹配，也会导致UI更新不顺畅。

解决方案 #

只需要做两个小修改就能搞定：

1. 把select的defaultValue改成value，让它变成受控组件，实时响应state变化：

<select onChange={this.onFirstSelect} value={this.state.value}>

2. 统一状态值和默认选项的value：
   • 把state的初始value设为空字符串""，和默认选项的value对应上；
   • 给第一个默认选项加上value=""，这样清空状态后就能自动选中它：

修改后的constructor部分：

constructor(props) {
  super(props);
  this.state = {
    value: "", // 这里从undefined改成""
    loading: false,
    count: []
  };
}

修改后的select选项：

<option value="">select value</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>

为什么这样有效？ #

现在select的选中状态完全由state.value控制：

• 当你选择某个选项时，onChange事件会更新state.value，UI同步选中对应选项；
• 当你点击清除按钮把state.value设为""时，select会自动选中value=""的默认选项，UI也就跟着清空啦。

完整修改后的代码 #

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      loading: false,
      count: []
    };
  }

  onFirstSelect = e => {
    const value = e.target.value;
    this.setState(
      { loading: true, value: value },
      () => {
        this.setState({ loading: false, count: [value, 1] });
      }
    );
  };

  onClickRoute = () => {
    this.setState({ value: "" });
  };

  render() {
    return (
      !this.state.loading && (
        <div className="App">
          <select onChange={this.onFirstSelect} value={this.state.value}>
            <option value="">select value</option>
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
          </select>
          &nbsp;
          <button onClick={() => this.onClickRoute()}>Clear Selection</button>
          <div>state value - {this.state.value}</div>
        </div>
      )
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

内容的提问来源于stack exchange，提问作者Sameera Manorathna