Question

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

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

我试图做什么？下面的代码段可与mouseclick一起使用。

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

如何使下拉菜单与上下键盘箭头键一起使用以及如何使用react输入键？

1 个答案: