this.pops不是函数反应形式

Question

我正试图在我的反应表单上的输入中使用谷歌地图地址自动完成。

当我单击它返回的地址时，输入的状态不会更新。

import React from "react";
import { Field } from "formik";
/* global google */
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.autocompleteInput = React.createRef();
this.autocomplete = null;
this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
}
componentDidMount() {
this.autocomplete = new google.maps.places.Autocomplete(
this.autocompleteInput.current,
{ types: ["address"] }
);
this.autocomplete.addListener("place_changed", this.handlePlaceChanged);
}

handlePlaceChanged() {
const place = this.autocomplete.getPlace();
// issue here
this.props.onPlaceLoaded(place);
// issue here
}
render() {
return (
<Field
innerRef={this.autocompleteInput}
id="autocomplete"
type="text"
name="address"
className="form-control"
placeholder=""
/>
);
}
}
export default SearchBar;

如何更新状态以存储所选地址？

编辑以显示如何使用我的搜索栏组件：

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import SearchBar from "./Google";

const LoginSchema = Yup.object().shape({
fName: Yup.string().required("Please enter your first name"),
address: Yup.string().required("invalid address"),
});
class Basic extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-lg-12">
<Formik
initialValues={{
fName: "",
postal: "",
}}
validationSchema={LoginSchema}
onSubmit={(values) => {
console.log(values);
console.log("form submitted");
}}
>
{({ touched, errors, isSubmitting, values }) =>
!isSubmitting ? (
<div>
<div className="row mb-5">
<div className="col-lg-12 text-center">
<h1 className="mt-5">LoKnow Form</h1>
</div>
</div>
<Form>
<div className="form-group">
<label htmlFor="fName">First Name</label>
<Field
type="text"
name="fName"
className={`mt-2 form-control
${touched.fName && errors.fName ? "is-invalid" : ""}`}
/>
<ErrorMessage
component="div"
name="fName"
className="invalid-feedback"
/>
</div>
<div className="form-group">
<label htmlFor="address">Address</label>

<SearchBar />
<ErrorMessage
component="div"
name="address"
className="invalid-feedback"
/>
</div>

<button
type="submit"
className="btn btn-primary btn-block mt-4"
>
Submit
</button>
</Form>
</div>
) : (
<div>
<h1 className="p-3 mt-5">Form Submitted</h1>
<div className="alert alert-success mt-3">
Thank for your connecting with us.
</div>
</div>
)
}
</Formik>
</div>
</div>
</div>
);
}
}
export default Basic;

包括更多信息，所以堆栈溢出将让我张贴

Answer 1

import Geocode from "react-geocode";
handlePlaceChanged() {
const place = this.autocomplete.getPlace().formatted_address;
// issue here
// this.props.onPlaceLoaded(place);
// issue here
Geocode.fromAddress(place).then( response => {
const { lat, lng } = response.results[0].geometry.location;
// you need this :
this.setState({
place: place,
lat: lat,
lng: lng
});
},
error => {
console.error(error);
}
);

}