單擊選定選項的十字按鈕時，未在react-select@1.0.0-rc.5中刪除預填充的值

Question

我目前正在構建一個React應用，當用戶想要更新其個人資料時，我需要一個帶有預填充值的表單。 在添加新用戶表單中，將下拉列表設為默認狀態是可以的。 但是，當用戶想要更新配置文件時，會有一個項目和一個組下拉列表，需要具有默認值，即創建用戶時的值。 意味着應該在下拉菜單中填充項目以及與之關聯的組。

<Select
    multi={true}
    simpleValue
    required
    value={value}
    options={[{value:'One', label:'PROJECTONE'},{value:'Two', label:'PROJECTTWO'}]}
    onChange={handleInputChange}
/>

因此，我需要使用預填充的項目（即PROJECTONE和PROJECTTWO兩者）進行下拉。

這是我的更新配置文件的ScreenShot。 我具有要在下拉列表中設置的值，但是如果我設置了逗號分隔的字符串，則當我想刪除該選項時，它不會受到影響，即我無法刪除該選項。

問題更新1：

這是我的全部內容

export interface IInputProps {
    required?: boolean;
    type: string;
    placeholder?: string;
    menuItems?: Object[];
    isDisabled?: boolean;
    onSelect?: (value) => void;
    defaultValue?: string;
    id?: string;
    multi?: boolean;
    searchable?: boolean;
}    


export interface IInputState {
    value: string;
}

export class Input extends React.PureComponent<IInputProps, IInputState> {

  constructor({ defaultValue }) {
      super();
      this.state = { value: (defaultValue || '')};
  }

  componentWillReceiveProps(nextProps) {
      if (!nextProps.defaultValue) {
          return;
      }

      const { state: { value } } = this;
      if (nextProps.defaultValue !== value) {
          this.setState({
              value: nextProps.defaultValue
          });
      }
  }

  handleInputChange = (selectedValue) => {
      this.setState({
          value: selectedValue,
      });
  }

  get value() {
      return this.state.value;
  }

  render() {
        const { props: { searchable, multi, id, menuItems, required, isDisabled, placeholder, type, defaultValue },
            state: { value, dropDownValue }, handleInputChange } = this;
            return (
                <Select
                    multi={multi ? multi : false}
                    simpleValue
                    searchable={searchable ? searchable : false}
                    disabled={isDisabled ? isDisabled : false}
                    required
                    value={value}
                    placeholder={placeholder ? placeholder : 'Select...'}
                    options={menuItems}
                    onChange={handleInputChange}
                />
            );
        }
    }
  }

我在需要選擇輸入並傳遞道具的地方使用此輸入組件。 當我將此組件用作..

<Input 
    multi={true}
    defaultValue="PROJECTONE,PROJECTTWO"
    ref="myProjects"
    id="myProjects"
    menuItems={[{value:'One', label:'PROJECTONE'},{value:'Two', label:'PROJECTTWO'}]}
/>

然后，它的值沒有被設置。 我正在使用組件將接收道具，以檢查是否傳遞了任何默認值（如果已通過），那么我正在設置該值。

一旦在下拉菜單中設置了值，我就無法使用十字按鈕將其刪除，這是這里的主要問題。

Answer 1

您的componentWillReceiveProps函數中存在問題：

```

componentWillReceiveProps(nextProps) {
  if (!nextProps.defaultValue) {
      return;
  }

  const { state: { value } } = this;
  if (nextProps.defaultValue !== value) {
      this.setState({
          value: nextProps.defaultValue
      });
  }
  }

```

此功能可能是由道具或狀態的更改引起的。

您在此處檢查nextProps.defaultValue !== value ，一旦選中select的一個選項，它的值可能不等於nextProps.defaultValue，那么您始終將value狀態設置為defaultValue ，因此無法獲取期權的正確價值。

您還需要檢查nextProps.defaultValue和this.props.defaultValue是否相同，以便獲得正確的更改后的值：

```

componentWillReceiveProps(nextProps) {
  if (!nextProps.defaultValue) {
      return;
  }

  const { state: { value } } = this;
  if (nextProps.defaultValue !== value && nextProps.defaultValue !== this.props.defaultValue) {
      this.setState({
          value: nextProps.defaultValue
      });
  }
  }

```