npm 包 react-places-autocomplete-extended 使用教程

阅读时长 7 分钟读完

#npm 包 react-places-autocomplete-extended 使用教程

随着互联网的发展,前端的发展也越来越迅速。前端框架的不断涌现,使得开发效率得到了极大的提高。

其中,React 是前端框架中的一种。而我们今天要介绍的是在 React 中使用的一个 npm 包——react-places-autocomplete-extended。

##什么是 react-places-autocomplete-extended

react-places-autocomplete-extended 是一个 React 的自动完成插件,它是 Google Maps Places API 的一个简单包装。这个插件允许你通过用户输入的地址,在一个 Google map 中自动完成地址的输入。

当用户输入地址时,react-places-autocomplete-extended 会根据所提供的输入与 Google Maps Places API 返回的结果进行匹配,并提供自动完成功能。

##如何使用 react-places-autocomplete-extended

1.安装和导入

使用 npm 安装 react-places-autocomplete-extended:

之后在你的代码中导入这个插件:

2.使用

将 PlacesAutocomplete 组件添加到你的代码中,并使用 renderProps 方法:

-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -------------------------------------

----- ----------- ------- --------------- -
  ------------------ -
    -------------
    ---------- - - -------- -- --
  -

  ------------ - ------- -- -
    --------------- ------- ---
  --

  ------------ - ------- -- -
    --------------- ------- ---
  --

  -------- -
    ------ -
      -------------------
        --------------------------
        ----------------------------
        ----------------------------
      -
        --- -------------- ------------ ----------------------- ------- -- -- -
          -----
            ------ ------------------- ------------ ----- -------- --- --

            -----
              -------- - --------------------- - -----

              --------------------------- -- -
                ----- ----- - -
                  ---------------- ----------------- - --------- - -------
                --

                ------ -
                  ---- -------------------------------------- - ----- ----
                    ------------------------
                  ------
                --
              ---
            ------
          ------
        --
      ---------------------
    --
  -
-

在上面的代码中,我们定义了一个 MyComponent,它包含一个可以自动完成地址的 input 标签。

PlacesAutocomplete 组件包含了 value, onChange 和 onSelect 三个属性。当用户输入地址时,handleChange 方法会被调用,并将输入的地址存储在组件的 state 中。当用户选择一个地址时,handleSelect 方法会被调用。

3.自定义显示在下拉框中的地址

如果你想要在下拉框中展示更多的信息,而不仅仅是地址,react-places-autocomplete-extended 还提供了一个自定义方法——suggestionRender。

接下来,我们将展示一个完整的使用 react-places-autocomplete-extended 的示例:

-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- -
  -----------------
  ----------
- ---- -------------------------------------

----- ----------- ------- --------------- -
  ------------------ -
    -------------
    ---------- - -
      -------- ---
      ---- -----
      ---- -----
    --
  -

  ------------ - ------- -- -
    --------------- ------- ---
  --

  ------------ - ------- -- -
    -------------------------
      ------------- -- ----------------------
      ------------ -- -
        ---------------
          -------- --------
          ---- -----------
          ---- -----------
        ---
      --
      ------------ -- ---------------------- --------
  --

  -------- -
    ----- ---------- - -
      ------ -------------------
      --------- ------------------
      ------------ ------ ---- ---------
    --
    ----- ---------------- - -- ---------- -- -- -
      ----- - -------- - - ----------------------
      ------ -
        -----
          --------------------------------------------- - ----------
        ------
      --
    --

    ------ -
      -----
        -------------------
          -----------------------
          ----------------------------
          -----------------------------------
        --
        --------------- -- ------------ ---------------------
        --------------- -- ------------- ---------------------
      ------
    --
  -
-

上述代码中,我们还使用了 PlacesAutocomplete 的 inputProps 属性,来使 input 标签中显示更多的内容。

##结语

通过上面的介绍,你一定已经学会了在 React 中使用 react-places-autocomplete-extended 插件。它是一个十分实用的插件,能够在某些应用场景下起到很大的作用。

如果你想要了解这个插件的更多用法和方法,可以查看官方文档——https://github.com/t-lekhraj/react-places-autocomplete-extended

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2f8c

纠错
反馈