如何在React项目中实现用户输入内容自动首字母大写

问题根因 #

你的代码中handleChange方法的首字母大写逻辑没有实际生效：
JavaScript中字符串属于不可变数据类型，userInput.charAt(0).toUpperCase()只会返回首字母大写后的单个新字符，不会修改原始的userInput变量，所以当前的转换逻辑等于没有执行。

修复代码 #

替换你的handleChange方法为以下内容即可实现首字母大写的需求：

const handleChange = (e) => {
    let userInput = e.target.value;
    // 处理空输入的边界情况
    if (!userInput) {
        setSearchedCity('');
        return;
    }
    // 首字母大写，剩余字符统一转为小写，符合城市名的通用格式要求
    const formattedCity = userInput.charAt(0).toUpperCase() + userInput.slice(1).toLowerCase();
    setSearchedCity(formattedCity);
}

多单词城市名适配方案 #

如果需要适配「Newcastle upon Tyne」这类多单词的英国城市名，可以使用正则实现每个单词首字母大写的转换：

// 封装城市名格式化方法
const formatCityInput = (inputStr) => {
  // 先统一转小写，再把每个单词的首字母替换为大写
  return inputStr.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase());
}

const handleChange = (e) => {
    const formattedCity = formatCityInput(e.target.value);
    setSearchedCity(formattedCity);
}

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