React.js 从头开始​​自动完成

Question

作为技术测试的一部分，我被要求在 React 中编写一个自动完成输入。我已经完成了这项工作，但我现在想添加使用箭头键在渲染列表上上下导航的功能。我做了一些广泛的谷歌搜索，除了 npm 包之外没有发现任何特定于 React 的内容。

明确地说，我正在寻找类似的东西，但对于 React：https://www.w3schools.com/howto/howto_js_autocomplete.asp

我基本上只需要箭头按钮功能，其他一切正常。

干杯

这是我尝试但无法正常工作的示例。

export default class Example extends Component {
  constructor(props) {
    super(props)
    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.state = {
      cursor: 0,
      result: []
    }
  }

handleKeyDown(e) {
    const { cursor, result } = this.state
    // arrow up/down button should select next/previous list element
    if (e.keyCode === 38 && cursor > 0) {
      this.setState( prevState => ({
        cursor: prevState.cursor - 1
      }))
    } else if (e.keyCode === 40 && cursor < result.length - 1) {
      this.setState( prevState => ({
        cursor: prevState.cursor + 1
      }))
    }
  }

  render() {
    const { cursor } = this.state

    return (
      <Container>
        <Input onKeyDown={ this.handleKeyDown }/>
        <List>
          {
            result.map((item, i) => (
              <List.Item
                key={ item._id }
                className={cursor === i ? 'active' : null}
              >
                <span>{ item.title }</span>
              </List.Item>
            ))
          }
        </List>
      </Container>
    )
  }
}

这是我的代码：

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      location: '',
      searchName: '',
      showSearch: false,
      cursor: 0
    };
  }

handleKeyPress = e => {
    const { cursor, searchName } = this.state;
    // arrow up/down button should select next/previous list element
    if (e.keyCode === 38 && cursor > 0) {
      this.setState(prevState => ({
        cursor: prevState.cursor - 1
      }));
    } else if (e.keyCode === 40 && cursor < searchName.length - 1) {
      this.setState(prevState => ({
        cursor: prevState.cursor + 1
      }));
    }
  };

 render() {
    const { searchName, location } = this.state;

    return (
      <div className="Search">
        <h1>Where are you going?</h1>
        <form id="search-form" onSubmit={this.handleSubmit}>
          <label htmlFor="location">Pick-up Location</label>
          <input
            type="text"
            id="location"
            value={location}
            placeholder="city, airport, station, region, district..."
            onChange={this.handleChange}
            onKeyUp={this.handleKeyUp}
            onKeyDown={this.handleKeyPress}
          />

          {this.state.showSearch ? (
            <Suggestions searchName={searchName} />
          ) : null}

          <button value="submit" type="submit" id="search-button">
            Search
          </button>
        </form>
      </div>
    );
  }

从 RESTful API 呈现列表的代码：

.then(res =>
  this.setState({
    searchName: res.data.results.docs.map(array => (
      <a href="#">
        <div
          key={array.ufi}
          className="locations"
        >
          {array.name}
        </div>
      </a>
    ))
  })
);

Answer 1

由于您将函数定义为handleKeyDown(e) {...}，因此上下文this 未指向类实例的上下文，因此上下文将由 onKeyDown 提供（我想它是window 作为this）

所以，你有两种方法：

1. 将你的函数声明为handleKeyDown = (e) => {...}

2. 将handleKeyDown 上下文绑定到组件实例，如onKeyDown={this.handleKeyDown.bind(this)}

另外，不要忘记您可能需要一个 mod items.length 计数器，这意味着当您按下并且已经选择了最后一项时，它将转到第一项。

您将降价存储到状态中的 api 使用只是一件可怕的事情。您不再有权访问这些字符串，而是将其保存为普通数组。将它传递到您需要的地方，并使用它在那里创建 jsx。

此外，您根本不使用您所在州的光标。