無法使用受控道具從父組件控制 Downshift selectedItem 道具

Question

我使用 Downshift 編寫了一個可重用的自動完成組件。 該組件封裝了許多 Relay 邏輯，用於從我的 GraphQL 端點獲取數據。 我有一個用例，父組件需要接收 selectedItem，顯示 selectedItem 的 name 屬性，然后清除 autocomplete 的 selectedItem（考慮選擇和顯示多個標簽）。

問題是我似乎無法從父組件控制自動完成的 selectedItem 。 我將 selectedItem 作為 null 發送到自動完成，但 inputValue/selectedItem 仍然是所選項目。

為簡單起見，去掉了 Relay 的示例代碼：

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

重現步驟

• 在文本框中輸入“項目”一詞
• 單擊顯示的三個結果之一

實際結果

• 父組件的標題和自動完成的 inputValue/selectedItem 都設置為所選項目的值

期望的結果

• 父組件的標題設置為所選項目的值
• 自動完成的 inputValue/selectedItem 被清除

Answer 1

試試下面的代碼。 這段代碼需要大量重構，但它仍然可以按需要工作。 所以，我只是按照文檔在 Downshift 上添加了 inputValue 道具。

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