React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.
Seleccionar en HTML nos permite elegir entre múltiples valores usando el menú desplegable. Aquí, estamos hablando de cambiar las opciones de selección en función de otro menú desplegable. En React, es muy fácil de lograr con la ayuda del estado. Para aquellos que no saben sobre el estado, aquí hay un breve resumen.
El ESTADO de un componente es un objeto que contiene cierta información que puede cambiar durante la vida útil del componente.
Si desea obtener más información sobre el estado, consulte state en react geeksforgeeks y state and lifecycle reactjs.org.
React tiene componentes basados en clases y componentes funcionales, por lo que para este artículo usaremos componentes funcionales. En el componente Funcional, el estado se puede administrar mediante useState hook .
Queremos cambiar las opciones de selección en función de otros menús desplegables, por lo que seguiremos los pasos a continuación.
- Cree una variable de estado que inicialmente sea nula o indefinida.
- Cree diferentes arrays para diferentes menús desplegables.
- Cree una variable local, por ejemplo, tipo que contendrá cualquiera de la array según el menú desplegable seleccionado.
- Cree una función que se llamará cada vez que se seleccione una opción del menú desplegable, esta función cambiará la variable de estado para que el valor del tipo se pueda determinar dinámicamente.
- Por último, use variables de tipo para crear un conjunto diferente de opciones que verá el usuario.
Ahora crearemos un Componente siguiendo todos los pasos descritos anteriormente.
App.js: a continuación se muestra el código para el componente App.js.
Javascript
import * as React from "react";
const App = () => {
/** "selected" here is state variable which will hold the
* value of currently selected dropdown.
*/
const [selected, setSelected] = React.useState("");
/** Function that will set different values to state variable
* based on which dropdown is selected
*/
const changeSelectOptionHandler = (event) => {
setSelected(event.target.value);
};
/** Different arrays for different dropdowns */
const algorithm = [
"Searching Algorithm",
"Sorting Algorithm",
"Graph Algorithm",
];
const language = ["C++", "Java", "Python", "C#"];
const dataStructure = ["Arrays", "LinkedList", "Stack", "Queue"];
/** Type variable to store different array for different dropdown */
let type = null;
/** This will be used to create set of options that user will see */
let options = null;
/** Setting Type variable according to dropdown */
if (selected === "Algorithm") {
type = algorithm;
} else if (selected === "Language") {
type = language;
} else if (selected === "Data Structure") {
type = dataStructure;
}
/** If "Type" is null or undefined then options will be null,
* otherwise it will create a options iterable based on our array
*/
if (type) {
options = type.map((el) => <option key={el}>{el}</option>);
}
return (
<div
style={{
padding: "16px",
margin: "16px",
}}
>
<form>
<div>
{/** Bind changeSelectOptionHandler to onChange method of select.
* This method will trigger every time different
* option is selected.
*/}
<select onChange={changeSelectOptionHandler}>
<option>Choose...</option>
<option>Algorithm</option>
<option>Language</option>
<option>Data Structure</option>
</select>
</div>
<div>
<select>
{
/** This is where we have used our options variable */
options
}
</select>
</div>
</form>
</div>
);
};
export default App;
Producción:
Nota: También puede usar el componente basado en clases, la lógica sería la misma.
Publicación traducida automáticamente
Artículo escrito por sanjeev2552 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA