En este artículo aprenderemos a cambiar la posición de un elemento dinámicamente usando ReactJS
Enfoque: Vamos a utilizar los siguientes pasos:
- Suponga que la posición de nuestro elemento es 0 en la coordenada x y 0 en la coordenada y.
- Luego sumaremos/restaremos algún valor de la coordenada x/y dependiendo de la dirección en la que nos estemos moviendo.
- Mantenga todos estos valores en el estado para que podamos ver el cambio en tiempo real
- Actualice las coordenadas en el estado y veremos cómo cambia la posición del elemento.
Configuración del entorno y ejecución:
-
Paso 1: crear el comando de la aplicación React
npx create-react-app foldername
-
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:
cd foldername
Estructura del proyecto: Tendrá el siguiente aspecto.
App.js
import React, { Component } from "react";
class App extends Component {
// Create state
state = {
xoffset: 0,
yoffset: 0,
delta: 10,
};
moveTitleToDown = () => {
this.setState(
{ yoffset: this.state.yoffset
+ this.state.delta });
};
moveTitleToRight = () => {
this.setState(
{ xoffset: this.state.xoffset
+ this.state.delta });
};
moveTitleToLeft = () => {
this.setState(
{ xoffset: this.state.xoffset
- this.state.delta });
};
moveTitleToUp = () => {
this.setState(
{ yoffset: this.state.yoffset
- this.state.delta });
};
render() {
return (
<div>
{/* Element to Move Dynamically */}
<h2
style={{
position: "absolute",
left: `${this.state.xoffset}px`,
top: `${this.state.yoffset}px`,
}}
>
GeeksforGeeks
</h2>
{/* Move Controls */}
<div style={{ marginTop: "80px" }}>
<button onClick={this.moveTitleToRight}>
Move Title To Right
</button>
<button onClick={this.moveTitleToDown}>
Move Title To Down
</button>
<button onClick={this.moveTitleToLeft}>
Move Title To Left
</button>
<button onClick={this.moveTitleToUp}>
Move Title To Up
</button>
</div>
</div>
);
}
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , haga clic en los botones para ver la salida
Publicación traducida automáticamente
Artículo escrito por pratikraut0000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA