Question

我有以下代码，它们使用react-google-maps中的StandaloneSearchBox组件。搜索工作正常，但是我想做的是转身并使用从StandaloneSearchBox检索的数据填充多个输入字段，以允许用户在将信息添加到数据库之前查看/编辑任何不一致之处。到目前为止，我尝试过的各种尝试都没有成功。

/* global google */

import React, { Component } from "react";
import {
  compose,
  withProps,
  lifecycle
} from "recompose";
import {
  withScriptjs
} from "react-google-maps";
import { StandaloneSearchBox } from "react-google-maps/lib/components/places/StandaloneSearchBox";
import "./Form.css";

const MyMapComponent = compose(

  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=....&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `600px` }} />,
    mapElement: <div style={{ height: `75vh`, width: '50vw' }} />,
  }),
  lifecycle({
    componentWillMount() {
      const refs = {}

      this.setState({
        places: [],

        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },
        onPlacesChanged: () => {
          const places = refs.searchBox.getPlaces();

          this.setState({
            places,
            // location_name: this.places.name,
            // location_name: props.places.name
            location_name: places.name
          });
        },
      })
    },
  }),
  withScriptjs
)(props =>
  <div data-standalone-searchbox="">
    <StandaloneSearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      onPlacesChanged={props.onPlacesChanged}
    >
      <input
        type="text"
        placeholder="Enter establishment name:"
        style={{
          boxSizing: `border-box`,
          border: `1px solid transparent`,
          width: `500px`,
          height: `45px`,
          padding: `0 12px`,
          borderRadius: `3px`,
          boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
          fontSize: `25px`,
          outline: `none`,
          textOverflow: `ellipses`,
        }}
      />
    </StandaloneSearchBox>
    <form className="form">
      <input
        value={this.location_name}
        name="location_name"
        onChange={this.handleInputChange}
        type="text"
        placeholder="Establishment"
      />
      <button onClick={this.handleFormSubmit}>Submit</button>
    </form>
    < ol>
      {
        props.places.map(({ place_id,
          name,
          formatted_address,
          formatted_phone_number,
          geometry: { location }
        }) =>
          <div>
            <div>
              <p>
                {name}
                {/* {this.location_name = name} */}
              </p>
              {formatted_address.split(',').map((address, i) =>
                <p>
                  {address}
                </p>
              )}
              <p>
                {formatted_phone_number}
              </p>
            </div>
          </div>
        )
      }
    </ol >
  </div >
);

class MyFancyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      location_name: ""
    }
  }

  render() {
    return (
      <MyMapComponent
      />
    )
  }
};


export default MyFancyComponent;

任何帮助或提示，将不胜感激。

Answer 1

以下示例演示了如何处理位置结果（name property）：

<form onSubmit={this.saveAddress}>
      <div>
        {this.state.places.map(({ place_id, name, formatted_address, geometry: { location } }) =>
          <div key={place_id}>
            <input type="text" defaultValue={name} onChange={(e) => this.handleChange(place_id, e)} />
          </div>
        )}
      </div>
      <button>Save</button>
      <div><pre>{JSON.stringify(this.state.places.map( p=> p.name), null, 2) }</pre></div>
    </form>




handleChange = (placeId, e) => {
    let newName = e.target.value;
    this.setState(prevState => {
      const places = [...prevState.places];
      let idx = places.findIndex(p => { return p.place_id == placeId });
      places[idx].name = newName;
      return { places: places };
    });
  };

现在，一旦用户提交表单，便可以保存更新/查看的地方结果：

saveAddress = (e) => {
   //console.log(this.state.places);
   e.preventDefault();
};

这里是a demo供您参考

如何使用react-google-maps中的StandaloneSearchBox的输出填充输入字段？

1 个答案: