Question

我是React的初学者，目前我正在尝试开发一个使用OpenWeatherMap API-https://openweathermap.org的应用程序。我的问题如下：

在我的父组件中，定义了几个函数。我将它们传递给子组件。其中之一是onSearchSubmit，其中包含event.preventDefault（）函数，以防止在使用Submit按钮后重新加载页面。

如上所述，我已经尝试过合成函数event.preventDefault（），但它不会导致成功的结果。

我有两个功能正在处理我的搜索文本框：

//App.js
onSearchChange = e => {
  let city = e.target.value;
  this.setState({ city });
  console.log(this.state.city);
};

onSearchSubmit = e => {
  e.preventDefault();
  const { city } = this.state;
  this.fetchDataFromApi(city);
};

<SearchBar
  onChange={this.onSearchChange}
  onSubmit={this.onSearchSubmit}
  />

这些功能将传递给子组件：

<SearchBar
    onChange={this.onSearchChange}
    onSubmit={this.onSearchSubmit}
    />

//SearchBar.js
const SearchBar = props => (
  <form>
    <input
      type="text"
      placeholder="City you wish to find:"
      onChange={props.onChange}
      onSubmit={props.onSubmit}
    />
    <button type="submit">Search</button>
  </form>
);

您可以在我的GitHub上找到整个存储库： https://github.com/kvaropil/open-weather-app

我希望SearchBar组件中的Submit按钮在单击后不会触发页面重新加载。

传递给子组件时，event.preventDefault（）无法正常工作

0 个答案: