React-Select v2.0.0 Async组件如何设置默认值且失焦不重置？

我之前也碰到过这个麻烦，react-select v2+移除了onBlurResetsInput属性后，失焦清空输入值的问题确实容易出现，给你两个针对性的解决方案：

方案一：过滤失焦触发的输入清空动作 #

react-select的onInputChange回调会传入第二个参数actionMeta，其中的action字段能帮我们判断是什么操作触发了输入值变化。当组件失焦时，这个值是input-blur，我们只需要忽略这种情况的更新即可：

import Async from 'react-select/lib/Async';

export class AsyncSelect extends React.PureComponent {
  state = {
    inputValue: this.props.defaultValue,
  }

  handleInputChange = (value, actionMeta) => {
    // 跳过失焦导致的空值更新，保留当前输入内容
    if (actionMeta.action === 'input-blur') {
      return;
    }

    this.setState({ inputValue: value });
    this.props.syncOptions(value);
  }

  render() {
    return (
      <Async
        inputValue={this.state.inputValue}
        onInputChange={this.handleInputChange}
        options={this.props.options}
        onChange={(option) => this.props.selectOption(option.value)}
      />
    );
  }
}

这个方案的好处是：既保留了用户主动清空输入框的操作（比如按删除键清空，此时action是input-change），又避免了失焦时的自动清空。

方案二：失焦后强制恢复默认值 #

如果你希望组件失焦后，不管用户输入了什么都回到初始的defaultValue，可以直接监听onBlur事件来重置状态：

import Async from 'react-select/lib/Async';

export class AsyncSelect extends React.PureComponent {
  state = {
    inputValue: this.props.defaultValue,
  }

  handleInputChange = (value) => {
    this.setState({ inputValue: value });
    this.props.syncOptions(value);
  }

  handleBlur = () => {
    // 失焦时恢复到初始默认值
    this.setState({ inputValue: this.props.defaultValue });
  }

  render() {
    return (
      <Async
        inputValue={this.state.inputValue}
        onInputChange={this.handleInputChange}
        options={this.props.options}
        onChange={(option) => this.props.selectOption(option.value)}
        onBlur={this.handleBlur}
      />
    );
  }
}

根据你的实际需求选对应的方案就行～

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