我有一张搜索表。当我单击中的“搜索”按钮时 SearchForm.js 文件中，我希望我的Map缩放到搜索结果的边界框中。
然而，我不断地得到一份工作 TypeError: Cannot read property 'addEventListener' of null 在我的 Map.js 文件
以下是这篇文章的摘录 SearchForm.js 文件我在react表单中有一个materialui按钮。

// some code omitted for example
return (
    <div
      className={classes.root}
    >
      <Form
        onSubmit={onSubmit}
        initialValues={initialValues}
        validate={validate}
        render={({ handleSubmit, values }) => (
          <form onSubmit={handleSubmit} noValidate>
            // some code omitted for example
                <Button
                  id='searchButton'
                  variant="contained"
                  color="primary"
                  endIcon={<SearchIcon></SearchIcon>}
                  type="submit"
                  fullWidth
                >
                  Search
                </Button>
             // some code omitted for example
          </form>
        )}
      />
    </div>
  );

这是你的电话号码 Map.js 文件我的价值观 maxWest , maxSouth , maxEast ，及 maxNorth 由于我目前正在处理ui，所以暂时都是硬编码的。在顶部 Map.js 文件，我一定要导入 SearchForm.js 通过使用线路 import SearchForm from './SearchForm.js'; .

var northEast = [131.308594, 46.195042];
var southEast = [117.597656, 8.233237];
var southWest = [79.101563, 32.842674];
var northWest = [86.847656, 44.715514];

...

var maxSouth = Math.min(southEast[1], southWest[1]);
var maxWest = Math.min(southWest[0], northWest[0]);
var maxNorth = Math.max(northWest[1], northEast[1]);
var maxEast = Math.max(northEast[0], southEast[0]);

// The error is from the addEventListener()*******************
document.getElementById('searchButton').addEventListener('click', function () {
        map.fitBounds([
          [maxWest - 5, maxSouth - 5], // southwestern corner of the bounds
          [maxEast + 5, maxNorth + 5] // northeastern corner of the bounds
        ]);
      });

我不确定我遗漏了什么，我也不明白为什么我会出现这个错误。非常感谢您的帮助！