reactjs - 如何使用我的 react 组件 PlaceInput 实现菜单输入框中的位置自动补全？

Question

我有一个支持谷歌地点自动完成的 PlaceInput 组件。

class PlaceInput extends Component {
  state = {
    scriptLoaded: false
  };

  handleScriptLoaded = () => this.setState({ scriptLoaded: true });

  render() {
    const {
      input,
      width,
      onSelect,
      placeholder,
      options,
      meta: { touched, error }
    } = this.props;
    return (
      <Form.Field error={touched && !!error} width={width}>
        <Script
          url="https://maps.googleapis.com/maps/api/js?key={my google api key}&libraries=places"
          onLoad={this.handleScriptLoaded}
        />
        {this.state.scriptLoaded &&
        <PlacesAutocomplete
            inputProps={{...input, placeholder}}
            options={options}
            onSelect={onSelect}
            styles={styles}
        />}
        {touched && error && <Label basic color='red'>{error}</Label>}
      </Form.Field>
    );
  }
}

export default PlaceInput;

我还有一个<Input>来自语义 UI 反应的菜单项。前端如下：

菜单代码如下：

          <Menu.Item>
            <Input
              icon='marker'
              iconPosition='left'
              action={{
                icon: "search",
                onClick: () => this.handleClick()}}
              placeholder='My City'
            />
          </Menu.Item>

如何利用 PlaceInput 组件制作菜单<Input>框来实现地点自动完成？谢谢！

Answer 1

如果您可以分享您的应用程序的工作示例（例如在代码和框中），我应该能够帮助您使 PlaceInput 类与来自语义 UI 反应的 Menu.Input 一起工作。

否则，您可以使用以下代码测试此类集成的完整工作示例，该代码基于react-places-autocomplete的入门代码。

import React from "react";
import ReactDOM from "react-dom";
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng
} from "react-places-autocomplete";
import { Input, Menu } from "semantic-ui-react";

const apiScript = document.createElement("script");
apiScript.src =
  "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places";
document.head.appendChild(apiScript);

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
  "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

class LocationSearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: "" };
  }

  handleChange = address => {
    this.setState({ address });
  };

  handleSelect = address => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => console.log("Success", latLng))
      .catch(error => console.error("Error", error));
  };

  render() {
    return (
      <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <Menu>
              <Menu.Item>
                <Input
                  icon="marker"
                  iconPosition="left"
                  placeholder="My City"
                  {...getInputProps({
                    placeholder: "Search Places ...",
                    className: "location-search-input"
                  })}
                />
              </Menu.Item>
            </Menu>

            <div className="autocomplete-dropdown-container">
              {loading && <div>Loading...</div>}
              {suggestions.map(suggestion => {
                const className = suggestion.active
                  ? "suggestion-item--active"
                  : "suggestion-item";
                // inline style for demonstration purpose
                const style = suggestion.active
                  ? { backgroundColor: "#fafafa", cursor: "pointer" }
                  : { backgroundColor: "#ffffff", cursor: "pointer" };
                return (
                  <div
                    {...getSuggestionItemProps(suggestion, {
                      className,
                      style
                    })}
                  >
                    <span>{suggestion.description}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
    );
  }
}

ReactDOM.render(<LocationSearchInput />, document.getElementById("root"));

希望这可以帮助！