如何根据输入值在React中更改背景图片？

核心思路 #

不用导入本地图片，通过关键词-图片URL映射表匹配用户输入，动态设置内联样式修改背景图，完全符合React状态管理逻辑，无需依赖jQuery。

实现步骤 #

1. 构建关键词映射表：将同一城市的不同称呼（比如New York、NYC）统一映射到对应图片的网络URL，方便快速匹配。
2. 新增背景图状态：用useState管理当前显示的背景图URL，支持默认图配置。
3. 匹配输入更新背景：在回车事件处理中，将用户输入转为小写（规避大小写敏感问题），匹配映射表后更新背景图状态。
4. 绑定内联样式：在根div上通过内联样式设置backgroundImage属性。

完整代码示例 #

import { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [headingText, setHeadingText] = useState('City');
  // 新增背景图状态，设置默认图片URL
  const [backgroundUrl, setBackgroundUrl] = useState('https://example.com/default-city.jpg');

  // 城市关键词-图片URL映射表，可扩展至数百个城市
  const cityImageMap = {
    'new york': 'https://example.com/new-york.jpg',
    'new york city': 'https://example.com/new-york.jpg',
    'nyc': 'https://example.com/new-york.jpg',
    'london': 'https://example.com/london.jpg',
    'tokyo': 'https://example.com/tokyo.jpg',
    // 更多城市配置...
  };

  function handleChange(event){
    setName(event.target.value);
  }

  function handleKeyDown(event){
    if(event.key === 'Enter'){
      setHeadingText(name);
      // 格式化输入文本，统一转为小写并去除首尾空格
      const formattedInput = name.trim().toLowerCase();
      // 匹配映射表，存在对应城市则切换图片，否则用默认图
      setBackgroundUrl(cityImageMap[formattedInput] || 'https://example.com/default-city.jpg');
    }
  }

  return (
    // 绑定内联样式设置背景图，可添加适配样式让图片铺满容器
    <div className="App" style={{ 
      backgroundImage: `url(${backgroundUrl})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      minHeight: '100vh'
    }}>
      <header className="App-header">
        <input 
          value={name} 
          onKeyDown={handleKeyDown} 
          onChange={handleChange} 
          type="search" 
          placeholder="Search for a city"
        />
        <h1>{headingText}</h1>
      </header>
    </div>
  );
}

export default App;

额外优化建议 #

• 如果图片命名有规律（比如nyc.jpg、london.jpg），可以直接动态拼接URL，省去维护映射表的成本：

  // 假设图片统一存放在CDN的指定目录下
  const baseImageUrl = 'https://example.com/city-images/';
  setBackgroundUrl(`${baseImageUrl}${formattedInput.replace(/\s+/g, '-')}.jpg` || '默认图URL');
  

• 可将匹配逻辑移至handleChange函数中，实现输入实时切换背景，提升交互流畅度。

内容的提问来源于stack exchange，提问作者Chris Abey