时间戳

首页 > 解决方案 > 如何将用户输入设置为大写

reactjs - 如何将用户输入设置为大写

问题描述

我正在尝试访问https://docs.openaq.org/ api，并且我创建了一个搜索功能，您可以在其中键入应该设置状态的城市名称，然后将其添加到用于数据的 url . 但是，用户输入必须大写，我似乎无法让它工作。

import React, {useState} from 'react';
import Axios from 'axios';
import Button from '../UI/Button';
import SearchedCity from './SearchedCity';

const Search = () => {
    const [searchedCity, setSearchedCity] = useState('');
    
    const [city, setCity] = useState();
    const [airQuality, setAirQuality] = useState();
    const [dateAndTime, setDateAndTime] = useState();
    const [latitude, setLatitude] = useState();
    const [longitude, setLongitude] = useState();
    const [country, setCountry] = useState();

    const searchCity = async () => {
        try{
            const url = `https://api.openaq.org/v1/measurements?country=GB&city=${searchedCity}`;
            const res = await Axios.get(url);
            
            console.log(res)
            
        } catch (error) {
            alert('Please learn to spell');
        }
    }
    const handleSubmit = (e) => {
        e.preventDefault();
        searchCity();
        console.log({searchedCity})
    }
    const handleChange = (e) => {
        let userInput = e.target.value;
        userInput.charAt(0).toUpperCase()
        console.log(userInput)
        setSearchedCity(userInput)
        
        
        
    }
    return (
        <div>
            <form onSubmit={handleSubmit} className="form" >
                <label>
                    <input type="text" placeholder="Search for a UK city" onChange={handleChange}  />
                    <Button handleSubmit={handleSubmit}></Button>
                </label>
                
            </form>
            <SearchedCity city={city} ></SearchedCity>
        </div>
    );
};

export default Search;

标签： reactjs

解决方案

尝试这样的事情

userInput = userInput.charAt(0).toUpperCase() + userInput.slice(1);

它会将第一个字母大写，但保持字符串的其余部分相同。

推荐阅读