标签: downshift

我面临前端代码库的问题Reactjs。我们使用库名称react-autoauggest来实现自动完成功能，但lead决定从react-autoauggest转向downshift。我通读了该文档并使用钩子实现了这一点useCombobox，但他提出了一些问题并告诉我在没有任何指导的情况下解决这些问题。我创建了这些问题的干净版本。

首先，我正在解决issue-4 清除按钮应该清除输入字段并关闭菜单的问题。但是当我单击清除按钮时，输入字段为空，但菜单仍然打开。您能给我一些关于如何在降档时做这些事情的指导吗？

这是我的codesandbox链接，从对象数组中过滤数据： 在此处查看代码沙箱

应用程序.js：

const App = () => {

    // Array of objects
    const [inputItems, setInputItems] = useState(data);

    // State for all primitive types
    const [value, setValue] = useState('');


    /**
     * It will returns the new filtered array.
     * @param data Array<Object> - The array to iterate over
     * @param inputValue {string} - Your input value
     * @return Array<Object> - Returns the …

我尝试将 DownShift 中的 useComboBox 与 react-hook-form 一起使用，并且输入的值始终未定义。我从这里开始：https://codesandbox.io/s/react-hook-form-controller-079xx ?file=/src/DonwShift.js

并将 DownShift.js 组件替换为： https: //codesandbox.io/s/usecombobox-usage-1fs67? file=/src/index.js:168-438

一切正常，除非我提交的值未定义。设置该值时我缺少什么？

<form className="card" onSubmit={handleSubmit(handleShare)}>
  <div className="body">
    <Controller
      as={Autocomplete}
      control={control}
      name="recipient"
      items={userList}
    />
    <button
      className="secondaryActionBtn inputBtn"
      type="submit"
      enabled={String(formState.dirty)}
    >
      <FontAwesomeIcon icon={faPlus} />
    </button>
    {errors.lastname && 'Feed Name is required.'}
  </div>
  <footer></footer>
</form>

import React, { memo, useState } from 'react';
import PropTypes from 'prop-types';
import { useCombobox } from 'downshift';

const menuStyles = {
  maxHeight: '180px',
  overflowY: 'auto',
  width: '135px',
  margin: 0,
  borderTop: 0,
  background: 'white', …