单击选定选项的十字按钮时，未在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
      });
  }
  }

```