Невозможно управлять пониженной передачей выделенного реквизита от родительского компонента с помощью контролируемого реквизита - PullRequest
Новая
       16

Невозможно управлять пониженной передачей выделенного реквизита от родительского компонента с помощью контролируемого реквизита

0 голосов
/ 19 сентября 2019

Я написал повторно используемый компонент автозаполнения, используя Downshift.Компонент инкапсулирует много логики Relay для извлечения данных из моей конечной точки GraphQL.У меня есть случай использования, когда родительский компонент должен получить selectedItem, отобразить свойство name для selectedItem, а затем очистить selectedItem от автозаполнения (подумайте о выборе и отображении нескольких тегов).

Проблема в том, что я не могу управлять выбранным элементом автозаполнения из родительского компонента.Я отправляю selectedItem как ноль для автозаполнения, но inputValue / selectedItem остается выбранным элементом.

Образец кода с Relay для простоты:

https://codesandbox.io/embed/spring-fire-um1xh

Шаги для воспроизведения

  • Введите слово "Item" в текстовое поле
  • Нажмите на один из трех отображаемых результатов

Фактический результат

  • Для заголовка родительского компонента и inputValue / selectedItem для автозаполнения установлены значения выбранного элемента

Желаемый результат

  • Название родительского компонента, установленного на значение выбранного элемента
  • inputValue / selectedItem автозаполнения очищено

1 Ответ

0 голосов
/ 19 сентября 2019

Попробуйте код ниже.Этот код требует много рефакторинга, но он работает в любом случае по желанию.Итак, я только что добавил реквизиты inputValue для Downshift согласно документу. 

----- index.js -------
function App() {
  const [title, setTitle] = useState("Select an Item");
  const [selectedItem, setSelectedItem] = useState(null);
  const [inputValue, setInputValue] = useState(""); //added these two to control input of inputbox

  const onItemSelected = selectedItem => {
    setTitle(selectedItem.name);
    setSelectedItem(null);
    setInputValue("") // after selection clear input
  };

  return (
    <div className="App">
      <h1>{title}</h1>
      <Autocomplete
        selectedItem={selectedItem}
        inputValue={inputValue} // passed down inputValue and setInputValue
        setInputValue={setInputValue}
        onItemSelected={onItemSelected}
      />
    </div>
  );
}

----Autocomplete.js--------
function Autocomplete({ selectedItem, onItemSelected, inputValue, setInputValue })  { // get those props
  const [items, setItems] = useState([]);

  const onInputValueChanged = e => {
    setInputValue(e.currentTarget.value) //change a input on inputchange
    const items = data.filter(f => f.name.includes(e.currentTarget.value));
    setItems(items);
  };

  return (
    <Downshift
      inputValue={inputValue} //added
      selectedItem={selectedItem}
      onChange={onItemSelected}
      itemToString={i => (i ? i.name : "")}
    >
      {({ getInputProps, getItemProps, getMenuProps, isOpen }) => (
        <div>
          <input {...getInputProps({ onChange: onInputValueChanged })} />
          <ul {...getMenuProps()}>
            {isOpen &&
              items.map(item => (
                <li {...getItemProps({ item, key: item.value })}>
                  {item.name}
                </li>
              ))}
          </ul>
        </div>
      )}
    </Downshift>
  );
}
...