React天气应用

让我们运用所学知识来编写一个实际的应用程序！我们将构建一个天气应用，显示当前天气状况以及未来5天的预报。再次强调，以下是我们将要构建的应用的实时预览：

让我们利用本课程第一部分学到的知识，创建一个最基础的“Hello World天气应用”，它只显示一个标题“Weather”！

由于我们现在要编写一个更大的应用程序，因此我们将代码拆分为多个文件。现在，index.js 将作为入口点，并包含渲染 App 组件的逻辑。我们将在 App.js 中开始编写自己的代码。

为了让我们的应用看起来更美观，我们需要一些样式。我们已经为你们准备好了样式，你可以专注于 React 的学习。如果你感兴趣，可以查看上面示例中的样式部分。

我们还需要让应用知道我们要查询哪个位置的天气，因此让我们添加一个表单，包含一个输入框和标签，标签内容为“城市, 国家”！

我们将 input 元素嵌套在 label 内，这样当用户点击标签时，输入框会自动获得焦点！

当你在输入框中输入内容并按下“Enter”键时，页面会刷新，但没有任何反应。我们真正想要的效果是：当输入城市和国家后，立即获取数据。让我们为 form 添加一个 onSubmit 处理函数，并在组件中添加一个 fetchData 函数！

^{如果你在上方的表单中输入城市/国家名称并按下 Enter 键，你将在浏览器控制台看到 console.log 输出}

在 fetchData 函数中调用 evt.preventDefault()（该函数在按下回车时被触发），我们告诉浏览器不要刷新页面，而是忽略其默认行为，转而执行我们指定的操作。目前，每次提交表单时，控制台都会重复输出“fetch weather data!”。但我们如何在该函数中获取用户输入的城市和国家呢？

通过将文本输入框的值存储在组件的本地状态中，我们就可以在该方法中获取它。这样做后，我们的输入框就变成了所谓的“受控输入”。

我们将当前输入的位置存储在 this.state.location，并为组件添加一个名为 changeLocation 的辅助方法，该方法在输入框的 onChange 事件触发时被调用，并将状态更新为当前输入的文本：

1class App extends React.Component {
2  fetchData = (evt) => { /* … */ };
3
4  changeLocation = (evt) => {
5    this.setState({
6      location: evt.target.value
7    });
8  };
9
10  render() {
11    return (
12      <div>
13        <h1>Weather</h1>
14        <form onSubmit={this.fetchData}>
15          <label>我想知道以下地点的天气
16            <input
17              placeholder="城市, 国家"
18              type="text"
19              value={this.state.location}
20              onChange={this.changeLocation}
21            />
22          </label>
23        </form>
24      </div>
25    );
26  }
27}

正如第一章提到的，当我们把任何数据保存到本地状态时，必须预先定义它。让我们来完成这一步：

1class App extends React.Component {
2  state = {
3    location: ''
4  };  
5  
6  ...
7}

在 fetchData 函数中，我们就可以通过 this.state.location 获取当前输入的位置：

1class App extends React.Component {
2  state = { /* … */ };
3
4  fetchData = (evt) => {
5    evt.preventDefault();
6    console.log('获取数据用于', this.state.location);
7  };
8
9  changeLocation = (evt) => { /* … */ };
10
11  render() { /* … */ }
12}

这是我们目前为止所学内容的完整可运行示例：

现在，无论你输入什么城市和国家，控制台都会输出“fetch data for <你的城市>, <你的国家>!”