reactjs - 如何使用给定地址初始化 StandaloneSearchBox 组件？

Question

我有一个没有 map 的 google.maps.places.SearchBox 的 react 组件，它是一个 StandaloneSearchBox。我想用初始值(这只是地址的格式化版本，例如“London, Kentucky, États-Unis”)传递它，然后能够在输入字段中更改地址。

我在州内有一个 places 属性，我想在其中保存 place 对象。如何在 componentDidMount() 方法的开头传递初始值，以便将其设置为 places 对象？它不能以这种方式工作。

const PlacesWithStandaloneSearchBox = compose(
withProps({
    googleMapURL: googleMapsURI,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />
}),
lifecycle({
    componentWillMount() {
        console.log("componentWillMount");
        const refs = {};

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

                this.setState({
                    places
                });

            }
        })
    },
    componentDidMount() {
        this.setState({
            places: this.props.value
        });
    }
}),
withScriptjs
)(props =>
<div className="fretlink-input form-group" data-standalone-searchbox="">
    <StandaloneSearchBox
        ref={ props.onSearchBoxMounted }
        bounds={ props.bounds }
        onPlacesChanged={ props.onPlacesChanged }>
        <input
            className="form-control"
            placeholder={ props.placeholder }
            type="text" />
    </StandaloneSearchBox>
    <ol>
        { props.places.map(({ place_id, formatted_address, geometry: { location } }) =>
            <li key={ place_id }>
                { formatted_address }
                {" at "}
                ({location.lat()}, {location.lng()})
            </li>
        )}
    </ol>
</div>
);

export default PlacesWithStandaloneSearchBox;

Answer 1

似乎正在初始化 StandaloneSearchBox基于对地址文本或经纬度的搜索，使用实际的 Google map 地点对象不可能使用组件 Prop 或其他方式开箱即用。

我认为你能做的最好的事情就是自己实现它，方法是使用 Google Maps places API 手动搜索你拥有的任何数据，获取初始位置，然后通过 this.setState 进行设置。在 componentDidMount就像你的例子一样。

但是，我没有这样做，因为我找到了一个更简单的解决方案，我认为也适用于您的情况。

如果您有格式化的地址，实际上可能根本没有理由执行搜索并用完整的 Google map 地点填充组件。您真正需要的只是输入中显示的文本。当您搜索新地址时，当然，您需要所有数据(lat lng 等)——但这已经在起作用了。对于初始地址，您可能已经有了这些数据。这实际上就是您在 <input> 中显示的内容那是你关心的。

幸运的是，分离 <input> 的行为真的很容易来自 StandaloneSearchBox 的行为因为<input>只是一个您可以完全控制的子组件。

我所做的只是使用更多的组件状态来保存输入应该显示的文本，然后将其设为受控组件。其他一切都以完全相同的方式工作，只是我控制了“ View ”，即 <input> 中显示的文本。 .

这是我的意思的粗略示例，使用您的代码:

  // init the state with your initial value "1 Something Street, etc"
  const [text, setText] = useState(INITIAL_VALUE_HERE)

  <StandaloneSearchBox
    ref={ props.onSearchBoxMounted }
    bounds={ props.bounds }
    // have onPlacesChanged set the state when a new option is picked
    // to whatever the address text of the selected place is
    // (needs to be implemented appropriately in onPlacesChanged of course)
    onPlacesChanged={() => { props.onPlacesChanged(setText) }}
  >
    <input
      className="form-control"
      placeholder={ props.placeholder }
      type="text"
      value={text} // control the input value with state
      onChange={(e) => { setText(e.target.value) }} // update the state when you type something
    />
  </StandaloneSearchBox>