Question

I am currently building a react app where I need a form with the pre-populated values in it when a user wants to update his/her profile. In the add new user form, It's fine to have the drop-down in its default state. But when a user wants to update profile then there is a project and a group dropdown that needs to have a default value i.e. the value when the user was created. Means the drop-down should be populated with the project and the group associated with it.

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

So I need a dropdown with the prepopulated projects i.e. PROJECTONE and PROJECTTWO both.

This is the ScreenShot of my update profile. I have the value which I want to set in the dropdown but if I set comma separated string then when I want to remove that option it is not being affected i.e. I am not able to remove that option.

Question Update 1:

So here is my full component

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}
                />
            );
        }
    }
  }

I am using this input component whereever I need a Select Input and passing the props. When I use this component as..

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

Then nothing is being set in it's value. I am using component will recieve props to check if there is any default value passed if it is passed then I am setting the value.

And Once the value is being set on the dropdown I can not remove it using it's cross button that's the main problem here.

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状态设置为{{1因此，您无法获得该选项的正确值。

您还需要检查defaultValue和nextProps.defaultValue是否相同，以便获得正确的更改值：

```

this.props.defaultValue

```

Pre populated value is not being removed in react-select@1.0.0-rc.5 when clicking on cross button of the selected option

1 个答案: