从 select 中选择值并将其传递给 useEffect

当我们需要根据用户从下拉菜单中选择的值来更新我们的 React 组件时，我们可以使用 useEffect 钩子来实现。下面是一个示例，在该示例中，我们将根据用户所选的城市来更新页面中的文字和背景图片。

使用 select 以及 useState

首先，我们需要在组件中使用 useState 来创建一个状态，以存储用户选择的城市。然后，我们将一个下拉菜单添加到我们的组件中，以便用户可以从中选择他们所在的城市。

import React, { useState } from 'react';

function CitySelector() {
  const [city, setCity] = useState('');

  function handleCityChange(event) {
    setCity(event.target.value);
  }

  return (
    <>
      <select value={city} onChange={handleCityChange}>
        <option value="">请选择城市</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
        <option value="chengdu">成都</option>
      </select>
      <div>
        当前选择的城市是：{city}
      </div>
    </>
  );
}

export default CitySelector;

使用 useEffect 更新组件

接下来，我们需要使用 useEffect 来侦听用户选择的城市，并根据不同的城市来更新组件。在下面的示例中，我们将根据不同的城市来更新页面中的文字和背景图片。

import React, { useState, useEffect } from 'react';

function CitySelector() {
  const [city, setCity] = useState('');

  function handleCityChange(event) {
    setCity(event.target.value);
  }

  useEffect(() => {
    if (city === 'beijing') {
      document.body.style.backgroundImage = "url('/beijing.jpg')";
    } else if (city === 'shanghai') {
      document.body.style.backgroundImage = "url('/shanghai.jpg')";
    } else if (city === 'guangzhou') {
      document.body.style.backgroundImage = "url('/guangzhou.jpg')";
    } else if (city === 'shenzhen') {
      document.body.style.backgroundImage = "url('/shenzhen.jpg')";
    } else if (city === 'chengdu') {
      document.body.style.backgroundImage = "url('/chengdu.jpg')";
    }
  }, [city]);

  return (
    <>
      <select value={city} onChange={handleCityChange}>
        <option value="">请选择城市</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
        <option value="chengdu">成都</option>
      </select>
      <div>
        当前选择的城市是：{city}
      </div>
    </>
  );
}

export default CitySelector;

在上面的代码中，我们使用了 useEffect 钩子来侦听用户选择的城市。钩子的第二个参数是一个数组，其中包含了我们想要监视的变量。当城市变量改变时，我们的函数将会被调用，我们可以在这里更新页面上的元素。

在这种情况下，我们使用了一个条件语句来选择不同的图片和文字来更新页面。请注意，我们是如何在组件的函数中直接操作文档对象的。这是一个反模式，因为 React 在渲染过程中需要掌控整个 DOM 树。因此，在正式的应用程序中，我们应该通过 React 的 Props 和 State 来实现这个目标。