如何使用 React 在网络聊天中获取密钥 up/down

Question

我目前正在使用 React 开发机器人框架网络聊天应用程序 js.I 想知道如何获取密钥 up/down。因为我想 select 或使用箭头键通过建议列表突出显示。我用于反应组件的代码附在下面，PFA，

async handleSuggestionClick(val) {
  const newValue = val.currentTarget.textContent;

  await this.setState({ typingChecking: "false" },
    () => { console.log(this.state.typingChecking) });

  await this.setState({ suggestions: [] },
    () => { console.log(this.state.suggestions) });


  this.state.suggestionCallback.dispatch({
    type: 'WEB_CHAT/SET_SEND_BOX',
    payload: {
        text: newValue,
    }
  });
  await this.setState({ typingChecking: "true" },
    () => { console.log(this.state.typingChecking) });
}

<div className="react-container webchat" >
    <ReactWebChat directLine={this.state.directLine} 
      webSocket={true}  
      store={this.state.storeValue} 
      sendTypingIndicator={true} />
    <div className="SuggestionParent" id="Suggestion1">
      {this.state.suggestions.map(suggestion => (
        <div className="Suggestion" 
          onClick={this.handleSuggestionClick} 
          onKeyDown={this.handleKeyDown}>
          {suggestion
            .toLowerCase()        
            .startsWith(this.state.suggestionTypedText) ? 
               (<div>
                  <b> 
                    {this.state.suggestionTypedText}
                  </b>
                  {suggestion
                    .toLowerCase()
                    .replace(this.state.suggestionTypedText, "")}
                </div>) : 
                (<div>{suggestion}</div>
              )
           }
        </div>
      ))
     }
</div>

Answer 1

来自重复问题的答案：

Keyboard events are generally handled in React using the onKeyDown property. I've placed it on an element that contains both Web Chat and your suggestions parent:
<div className={ROOT_CSS} onKeyDown={this.handleKeyDown.bind(this)}>
  <div className={WEB_CHAT_CSS + ''}>
    <ReactWebChat
That will handle all key presses, so you'll need a way to route to the function for the correct key. You could use a switch statement but the source code for [react-autocomplete][3] uses a lookup object and I think that's smart.
keyDownHandlers = {
  ArrowDown(event) {
    this.moveHighlight(event, 1);
  },
  ArrowUp(event) {
    this.moveHighlight(event, -1);
  },
  Enter(event) {
    const {suggestions} = this.state;
    if (!suggestions.length) {
      // menu is closed so there is no selection to accept -> do nothing
      return
    }
    event.preventDefault()
    this.applySuggestion(suggestions[this.state.highlightedIndex]);
  },
}

handleKeyDown(event) {
  if (this.keyDownHandlers[event.key])
  this.keyDownHandlers[event.key].call(this, event)
}
I've centralized the functionality for the up and down arrows into one function: moveHighlight. You will need to define a new property in your state to keep track of which suggestion has been selected by the keyboard. I'm keeping the name highlightedIndex from react-autocomplete.
moveHighlight(event, direction) {
  event.preventDefault();
  const { highlightedIndex, suggestions } = this.state;
  if (!suggestions.length) return;
  let newIndex = (highlightedIndex + direction + suggestions.length) % suggestions.length;
  if (newIndex !== highlightedIndex) {
    this.setState({
      highlightedIndex: newIndex,
    });
  }
}

如何使用 React 在网络聊天中获取密钥 up/down

How to take a key up/down in web chat using react

javascript

bots

reactjs

botframework