Question

我使用Downshift编写了可重用的自动完成组件。该组件封装了很多Relay逻辑，用于从GraphQL端点获取数据。我有一个用例，其中父组件需要接收selectedItem，显示selectedItem的name属性，然后清除自动完成的selectedItem（请考虑选择并显示多个标签）。

问题是我似乎无法从父组件控制自动完成的selectedItem。我正在将selectedItem作为null发送到自动完成功能，但inputValue / selectedItem仍然是所选项目。

为简单起见，删除了带有中继的示例代码：

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

复制步骤

在文本框中输入单词“ Item”
单击显示的三个结果之一

实际结果

父组件的标题和自动完成的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>
  );
}

无法使用受控道具从父级组件降档selectedItem道具

1 个答案: