0

我使用 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 被清除
4

1 回答 1

0

试试下面的代码。这段代码需要大量重构，但它仍然可以按需要工作。所以，我只是按照文档在 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>
  );
}
于 2019-09-19T16:16:24.297 回答