当我使用鼠标单击时，我的 onClick 功能正在工作，但是当我使用键盘时，它不起作用。任何建议如何解决？答案

【问题标题】：my onClick function is working when i use mouse click , but when i use the keyboard , it is not working . any suggestions how to fix that?当我使用鼠标单击时，我的 onClick 功能正在工作，但是当我使用键盘时，它不起作用。任何建议如何解决？
【发布时间】：2019-08-08 13:54:19
【问题描述】：

所以基本上，我正在使用 react-places-autocomplete ，当用户点击其中一个地址建议时，我试图调用点击功能。当我使用鼠标时它工作，但当我使用键盘时它不工作。请检查我的代码

我已经尝试过 onSelect onKeyPressed 并且他们没有工作。

import React, { useState, useEffect } from "react";

import "./Location.css";

import PlacesAutocomplete, { geocodeByAddress,getLatLng } from "react-places-autocomplete";

import { Paper, TextField } from "@material-ui/core";

function AddLocation(props) {

    //here is the function

    const handleClick = () => {

        console.log("the function is called ");

    };

    return (
    <Paper elevation="5">

      <div style={{ padding: 10 }}>

        <PlacesAutocomplete
          value={address}
          onChange={handleChange}
          onClick={handleChange}
        >
          {({ getInputProps, suggestions, getSuggestionItemProps, load }) => (
            <>
              <TextField
                id="outlined-name"
                label="Address"
                error={errors.address}
                value={address}
                helperText={errors.address}
                name="name"
                style={{ width: "100%" }}
                variant="outlined"
                {...getInputProps({
                  placeholder: "Search Places ...",
                  className: "location-search-input"
                })}
              />
              <div className="autocomplete-dropdown-container">
                {load && <div>Loading...</div>}
                {suggestions.map(suggestion => {
                  const className = suggestion.active
                    ? "suggestion-item--active"
                    : "suggestion-item";
                  const style = suggestion.active
                    ? {
                        backgroundColor: "#fafafa",
                        cursor: "pointer"
                      }
                    : {
                        backgroundColor: "#ffffff",
                        cursor: "pointer"
                      };
                  return (
                    <div
                      {...getSuggestionItemProps(suggestion, {
                        className,
                        style
                      })}
                    >
                      {/* /////////////////here is my onClick//////////////  */}
                      <div onClick={handleClick}>
                        <span>{suggestion.description}</span>
                      </div>
                      {/* ///////////////////////////////////////////////////////// */}
                    </div>
                  );
                })}
              </div>
            </>
          )}
        </PlacesAutocomplete>
      </div>
    </Paper>
    );
}

export default AddLocation;

当我点击一个建议时，我希望鼠标点击和键盘点击能够调用我的函数

【问题讨论】：

您如何尝试选择div 以使用键盘单击？也许把它变成一个锚 (a) 或其他可聚焦的东西？
onKeyPress?不是 OnKeyPressed
onClick 仅触发鼠标单击和轻触。要触发键盘使用onKeyDown 或onKeyUp。
可能是onKeyDown 或者我认为有onFocus
感谢您的 cmets 但它不起作用

标签： javascript reactjs onclick onkeypress googleplacesautocomplete

【解决方案1】：

有人在react-places-autocomplete repo 上遇到了与您相同的问题：here。解决办法：

const inputProps = getInputProps({ placeholder: locationPlaceholder });

const onKeyDown = (event) => {
  const suggestionsOpen = !!suggestions.length; // find out if suggestions are active or not
  inputProps.onKeyDown(event); // do the normal onKeyDown callback
  if(!suggestionsOpen && event.keyCode === 13){ // if this is enter key, submit form
    this.submitForm(); 
  }
}

<input type="text" {...inputProps} onKeyDown={onKeyDown} />

【讨论】：