Javascript React.js项目中的错误

我正在我的react项目中集成地图。我犯了一些错误。我在我的项目中使用了typescript

下面是显示错误的代码：

handleChange = (e:any) => {
 this.setState({location: this.state.location})
     function initAutocomplete() {
       var input = document.getElementById('pac-input');
       var searchBox = new window.google.maps.places.SearchBox(input);
       searchBox.addListener('places_changed', function() {
         this.setState({ PlaceName: document.getElementById('pac-input').value });
       });
     }
   
     initAutocomplete();
 
 }

这是我面临的错误：

1.此错误显示在var搜索框最后一个括号（输入）的第5行

“HTMLElement | null”类型的参数不能分配给“HTMLInputElement”类型的参数。 类型“null”不可分配给类型“HTMLInputElement”。ts（2345）

此错误显示在本.setstate中的第7行

类型“SearchBox”上不存在属性“setState”。ts（2339）

此错误显示在document.getElementById（'pac-input'）中的第7行

对象可能为“null”。ts（2531）

此错误显示在最后一个值的第7行

---

类型“HtmleElement”上不存在属性“value”。如果您知道自己在做什么以及如何使用它，那么ts（2339）

TypeScript是最强大、最有用、最奇妙的东西。如果你不这样做，那将是你最糟糕的噩梦

这就是为什么你的错误有三分之四是因为你在React中使用了错误的TS

让我重写您的代码，使其与TypeScript一起工作：

handleChange=（e:any）/*#1*/=>{
this.setState（{location:this.state.location}）/#2
函数initAutocomplete（）{
const input=document.getElementById（'pac-input'）！作为HTMLInputElement/#3#4；
const searchBox=newwindow.google.maps.places.searchBox（输入）；
searchBox.addListener（'change'，function（）{//没有“places\u changed”这样的事件。~更改会有帮助吗~
this.setState（{PlaceName:document.getElementById（'pac-input'）.value#5}）；
});
}
initAutocomplete（）；
}

您的问题始于这样一个事实：您没有在React项目上工作，换句话说，您没有将JavaScript编写为React前端，而是一个普通的JavaScript应用程序

我是什么意思

在React视图中，您的搜索栏将是一个组件，或者换句话说，您的

输入

，将是它自己的组件，称为

搜索栏

，因此，与其这样做，不如：

const input = document.getElementById('pac-input')! as HTMLInputElement //#3 #4;

您可以这样编写整个组件：

import React from 'react';

class SearchBar extends React.Component {
  state = { term: '' };

  onInputChange = (event) => {
    this.setState({ term: event.target.value });
  };

  onFormSubmit = (event) => {
    event.preventDefault();

    this.props.onFormSubmit(this.state.term);
  }

  render() {
    return (
      <div className="search-bar ui segment">
        <form onSubmit={this.onFormSubmit} className="ui form">
          <div className="field">
            <label>Some Input Field</label>
            <input type="text" value={this.state.term} onChange={this.onInputChange} />
          </div>
        </form>
      </div>
    );
  }
}

export default SearchBar;

从“React”导入React；
类SearchBar扩展了React.Component{
状态={术语：'}；
onInputChange=（事件）=>{
this.setState（{term:event.target.value}）；
};
onFormSubmit=（事件）=>{
event.preventDefault（）；
this.props.onFormSubmit（this.state.term）；
}
render（）{
返回(
一些输入字段
);
}
}
导出默认搜索栏；

---

试一试，如果你遇到麻烦，回来问一个问题。

请简要说明一下这篇文章中的一些措辞。我对它进行了编辑，使其对初学者友好。这不是您正在进行的react项目，我为什么这么说？因为您正在使用纯JavaScript手动连接DOM元素。