使用Typescript进行React和Google自动完成

时间:2020-05-03 12:01:23

标签: reactjs typescript google-api react-bootstrap

我有一个Google地址autcomplete和react-bootstrap表单,我无法使类型与ref相匹配。

class ProfileForm extends React.Component<PropsFromRedux, ProfileFormState> {
    private myRef = React.createRef<FormControl<any>>();
    private autocomplete?: google.maps.places.Autocomplete;
    ...

}

我的窗体控件是这样的:

<Form.Control ref={this.myRef} type="text" placeholder="Enter address"
              defaultValue={this.props.userProfile.location!.formatted_address}
/>

这是我创建自动填充的方式:

function forceCast<T>(input: any): T {
    // @ts-ignore <-- forces TS compiler to compile this as-is
    return input;
}


//@ts-ignore
    this.autocomplete = new google.maps.places.Autocomplete(
        forceCast<HTMLInputElement>(this.myRef.current),
        options);

我的问题是:

在没有施力的情况下我该怎么办?

Google自动完成功能需要HTMLInputElement(我已经尝试了其他类型的东西),但是我可以用react-bootstrap获得的最好的是FormControl(我不知道如何将其“投射”到除显示的方式之外的任何其他方式。

0 个答案:

没有答案