Как использовать реактив-выбор без списка опций? - PullRequest
Новая
       5

Как использовать реактив-выбор без списка опций?

0 голосов
/ 19 марта 2020

Я бы хотел, чтобы пользователь мог вводить слова и нажимать ввод / вкладку, чтобы отправить несколько вариантов. Эта функциональность явно возможна, как показано в последнем примере на этой странице (под названием «Многократный ввод текста»). Тем не менее, когда я нажимаю Enter / Tab значения не отображаются. Если я включаю меню и использую опцию «Создать новый», то все работает нормально. Кроме того, если я дам компоненту опору prop, это прекрасно работает. 

import CreatableSelect from 'react-select/creatable';

export type OptionType = {
  value: string;
  label: string;
  __isNew__?: boolean;
};
export type Value = ValueType<OptionType>;
export type Values = Array<Value>;

export const createOption = (value: string, label?: string): OptionType => ({
  value,
  label: label ? label : value
});

interface ListTextFieldProps extends WithStyles<typeof styles>, WithTheme {
  values: Values;
  setValues: (values: Values) => void;
  label?: string;
}


const ListTextField: React.FC<ListTextFieldProps> = props => {

  const [inputValue, setInputValue] = useState('');

  const selectStyles = {
    input: (base: any) => ({
      ...base,
      color: props.theme.palette.text.primary,
      '& input': {
        font: 'inherit'
      }
    })
  };

  const handleInputChange = (value: string, meta: InputActionMeta) => {
    if (meta.action === 'input-change') {
      setInputValue(value);
    }
  }

  const handleKeyDown = (event: any) => {
    if (!inputValue) return;
    if (['Enter', 'Tab'].includes(event.key)) {
      console.log(inputValue)
      handleValueChange([...props.values, createOption(inputValue.trim())])
      setInputValue('');
    }
  }

  const handleValueChange = (values?: Value | Values | null) => {
    console.log(values)
    if (Array.isArray(values)) {
      props.setValues(values);
    } else {
      throw new Error('Unexpected type passed to ReactSelect onChange handler')
    }
  }

  return (
    <div className={props.classes.root}>
        <CreatableSelect
          classes={props.classes}
          inputValue={inputValue}
          onInputChange={handleInputChange}
          onKeyDown={handleKeyDown}
          styles={selectStyles}
          textFieldProps={{
            label: props.label ? props.label : undefined,
            InputLabelProps: {
              shrink: true
            }
          }}
          menuIsOpen={false}
          values={props.values}
          onChange={handleValueChange}
          isMulti
        />
    </div>
  );
};

1 Ответ

2 голосов
/ 25 марта 2020

Вы предоставили values реквизит для выбора компонента. Это должно быть value.

...