如何使用上下键盘箭头键使下拉菜单可用并使用反应输入键？

Question

我是编程新手，我想实现一个下拉菜单，可以使用向上或向下箭头导航并输入键盘键。

我想做什么？我有一个下拉组件，列出了从父组件传递给它的项目。目前它通过鼠标单击选择下拉菜单中的项目。我希望它也可以与向上和向下箭头键和输入键一起使用。

我试图做什么？下面的代码片段适用于鼠标点击。

class Parent extends React.PureComponent {
    state = {
        input_val: '',
    }

    handle_item_select = (val) => {
        this.setState({input_val: val});
    } 
    handle_input_change = (e) => {
        this.setState({input_val: e.target.value;
    }

    render = () => {
        return (
            <input 
                on_change={this.handle_input_change}/>
            <DropDown
                on_change={this.handle_item_select}
                values={this.state.items}/>
        )
     }
 }

class DropDown extends React.PureComponent {
    handle_item_select = (value) => {
        this.props.on_change(value);
    };

    render() {
        return (
            <div>
                 {this.props.values.map((value, index) =>
                     <Item
                         key={index}
                         value={value}
                         on_select={this.handle_item_select}
                     />)}
            </div>
        );
    }
}


class Item extends React.PureComponent {
    handle_item_select = e => {
        e.stopPropagation();
        this.props.on_select(this.props.value);
    };

    render = () => {
        return (
            <div onClick={this.handle_item_select}>
                {this.props.value.name}
            </div>
        );
    }
}

有人可以帮我解决这个问题。我如何使用向上/向下箭头键浏览下拉项并输入键。

谢谢。

Answer 1

你可以试试这样的

     const myTextInput = props => {
     const [list, setList] = useState(
        [{name: 'London', id: 1},
         {name: 'usa', id: 2},
        ]);
        const [active, setActive] = useState(0);

       const keyDownHandler = event => {
        if (event.keyCode === 38 && active > 0) {
            setActive(active - 1);
    }   else if (event.keyCode === 40 && event < list.length - 1) {
            setActive(active + 1);
    }
  };

  return (
    <div>
      <input onKeyDown={keyDownHandler} />
      <ul>
        {list.map((city, i) => (
          <li key={city.id} className={active === i ? 'active' : 'no-active'}>
            {city.name}
          </li>
        ))}
      </ul>
    </div>
  );
};