Quiero cambiar la imagen de fondo de un sitio en función de la entrada que escribe el usuario. Por ejemplo, si el usuario escribe en Nueva York o Ciudad de Nueva York o NYC, la imagen de fondo cambia a una imagen de NYC.
En este momento, tengo una etiqueta div con una clase y en un archivo CSS, la imagen de fondo está configurada en una URL de Internet. Me di cuenta de que necesita importar el archivo que desea usar como imagen de fondo si desea configurar el estilo en línea en el archivo .jsx, pero creo que este sería un método tedioso ya que tengo cientos de imágenes que Quiero renderizar basado en la entrada. Entonces, sin usar jQuery (vi otra publicación similar a esta pregunta pero en jQuery y he leído que usar jQuery con React no es una gran idea y ni siquiera estoy seguro de que pueda hacerlo funcionar con mi configuración de React) cómo lo haría ¿Cambias la imagen de fondo de un div dependiendo de un valor de entrada?
function App() { const [name, setName] = useState(''); const [headingText, setHeadingText] = useState('City'); function handleChange(event){ setName(event.target.value); } function handleKeyDown(event){ if(event.key === 'Enter'){ setHeadingText(name); } } return ( <div className="App"> <header className="App-header"> <input value={name} onKeyDown={handleKeyDown} onChange={handleChange} type="search" placeholder="Search for a city"></input> </header> </div> ); }Puede utilizar estilos en línea de CSS como uno de los métodos, he reescrito su código a continuación.
function App() { const [name, setName] = useState(''); const [headingText, setHeadingText] = useState('City'); function handleChange(event){ setName(event.target.value); } function handleSubmit(event){ setHeadingText(name) } return ( <div className="App" style={{ backgroundImage:`url(${name}.jpg)` }}> <header className="App-header"> <input value={name} onChange={handleChange} type="search" placeholder="Search for a city"/> <button onClick={handleSubmit}>Enter</button> </header> </div> ); }La URL de backgroundImage debe apuntar a un archivo/directorio en particular en su proyecto que contiene la imagen, o un enlace a un archivo jpg que contiene la imagen.
Algunos sitios web brindan API para buscar fondos de pantalla e imágenes de fondo que puede usar. Uno de ellos es Unsplash . Regístrese como desarrollador , cree una aplicación (o use la aplicación de demostración) y copie su ACCESS_KEY y el código pasado (YOUR_ACCESS_KEY) para enviar su solicitud a la API de Unsplash y obtener fondos de pantalla.
import axios from "axios"; import { useState } from "react"; import "./styles.css"; export default function App() { const [backgroundUrl, setBackgroundUrl] = useState(""); const [searchInput, setSearchInput] = useState(""); const [loading, setLoading] = useState(false); const searchBackground = () => { if (!searchInput) { alert("There is no any word to searching!"); return; } setLoading(true); // Send request to Unsplash API for searching your word and get wallpapers of that. axios .get("https://api.unsplash.com/search/photos/", { params: { client_id: "YOUR_ACCESS_KEY", query: searchInput } }) .then((res) => { const results = res?.data?.results; const randomBackground = results[Math.floor(Math.random() * results.length)]; setBackgroundUrl(randomBackground.links.download); }) .catch((err) => { console.log(err); }) .then(() => setLoading(false)); }; if (loading) return <div>Loading background...</div>; return ( <div className="App"> <h1>Please enter background title</h1> <input value={searchInput} onChange={(e) => setSearchInput(e.target.value)} /> <button onClick={searchBackground}>Search</button> <div style={{ marginTop: 50 }}> {backgroundUrl && ( <img src={backgroundUrl} alt="background" width={"100%"} /> )} </div> </div> ); }