I have a dynamic select that works as follows I explain:
There is an input where I add a value "X" and when I click the button called "generate select" it adds the number of values that I add to the input
When I select a select value, it loads another dynamic select where the missing numbers appear in ascending order and so on until the last number is selected, and the last select that is generated shows a button called "create".
Option 1
What I need is each dynamic select where the create button appears when selecting a value, it is deactivated and only shows the selected value.
import React, { useState } from "react";
//input dinamico
import Row from "./Row2";
let initialState = {
first: null,
arraySelect: [],
arraySelect2: []
};
function test(props) {
//input dinamico
const [rows, setRows] = useState([]);
const [initialeRow, setInitialRow] = useState({ nombre: "" });
//SELECT2
const [selectedNumbers, setSelectedNumbers] = useState([]);
const handleOnChange = (index, value) => {
const copy = rows.map((e, i) => {
if (i === index) {
e.nombre = value;
}
return e;
});
setRows([...copy]);
};
//division
const [number, setNumber] = useState();
//Mostrar 4
const [modocuatro, setModoCuatro] = useState(null);
//Mostrar 5
const [modoboton, setModoBoton] = useState(null);
//modo cuatro
const handleClick_cuatro = (event) => {
event.preventDefault();
setModoCuatro(true);
global.multi = global.nuevo * global.select1;
console.log(global.multi + "resultado");
};
const handleInput_division = (event) => {
const { name, value } = event.target;
setNumber({ ...number, [name]: value });
};
const handleInput_division2 = (event) => {
const { name, value } = event.target;
setSelect(value);
setNumber({ ...number, [name]: value });
setInitialRow({ nombre: value * 1 + 1 });
};
const [arraySelect, setarraySelect] = useState(initialState.arraySelect);
const [arraySelect2, setarraySelect2] = useState(initialState.arraySelect2);
const [numberIni, setnumberIni] = useState(initialState.first);
const [numberIni2, setnumberIni2] = useState(initialState.first);
const getArray = (value) => {
let arr = [];
{
let reco = Math.round(numberIni - parseInt(value));
console.log(reco + "mi");
if (parseInt(value) == numberIni) {
return false;
}
Array(reco)
.fill(1)
.map((value2, key) => {
arr.push(parseInt(value) + parseInt(key + 1));
});
}
return arr;
};
const setSelect = (value) => {
//debugger;
let isArray = getArray(value);
if (isArray) {
setarraySelect([...arraySelect, isArray]);
setModoBoton(true);
}
if (isArray) {
setInitialRow({ nombre: value });
setRows([...rows, { nombre: value }]);
}
};
//segundo array
const getArray2 = (value) => {
const numValue2 = parseInt(value, 10);
const arr2 = [];
for (let i = 0; i < numValue2 - 1; i++) {
arr2.push(numValue2 - i - 1);
}
if (arr2.length) {
return arr2;
}
};
//segundo select
const setSelect_select2 = (value) => {
let mi = global.division2020;
let isArray2 = getArray2(value);
if (isArray2) {
setarraySelect2([...arraySelect2, isArray2]);
setInitialRow({ nombre: initialeRow.nombre * 1 + 1 });
setRows([...rows, initialeRow]);
}
};
//SEGUNDO SELECT
const handleChange = (index, value) => {
const tmpSelectedNumbers = [...selectedNumbers];
tmpSelectedNumbers[index] = value;
setSelectedNumbers(tmpSelectedNumbers);
};
const handleSubmit = (event) => {
event.preventDefault();
setnumberIni(event.target.numberIni.value);
setnumberIni2(event.target.numberIni2.value - 1);
};
const resetFormtodo = () => {
setnumberIni(null);
setnumberIni2(null);
setRows([]);
setarraySelect([]);
setarraySelect2([]);
};
return (
<div>
<form onSubmit={handleSubmit}>
<div class="row">
<div class="col-sm-3">
<h6>INGRESA UN PRIMER VALOR "GRUPOS"</h6>
<div class="input-group ">
<select
name="numberIni2"
class="form-control"
onChange={handleInput_division}
>
<option value="0" selected>
Seleccione
</option>
<option value="10"> 10 </option>
<option value="20">20</option>
</select>
<br />
</div>
</div>
<div class="col-sm-3">
<h6>INGRESA UN SEGUNDO VALOR</h6>
<div class="input-group ">
<input
type="number"
name="numberIni"
placeholder="0"
class="form-control"
/>
<br />
<button type="submit" className="btn btn-primary">
GENERAR
</button>
</div>
</div>
</div>
</form>
<br />
<div>
<hr />
</div>
<br /> <br />
<div class="row">
<div class="col-sm-12">
{numberIni && (
<div>
<h6>Criterio Para Equipos Clasificados a la Siguiente Fase</h6>
<label>
<font size="2">
1° Clasificados Por Grupo <br />
Clasificarán a Siguiente Fases Los Primeros : {" "}
</font>
</label>
<select onChange={handleInput_division2} name="numberIni3">
<option value="seleccione">Seleccione</option>
{Array(parseInt(numberIni))
.fill(1)
.map((value, key) => {
return <option value={key + 1}>{key + 1} Equipos</option>;
})}
</select>
<label>
<font size="2"> Equipos De Cada Grupo </font>{" "}
</label>
<label>
<font size="2">
{" "}
{" "}
{modoboton ? (
<button
className="btn btn-primary"
onClick={handleClick_cuatro}
>
Generar select
</button>
) : (
<></>
)}{" "}
</font>{" "}
</label>
<hr />
{modocuatro ? (
<div class="col-sm-10" style={{ top: "-20px" }}>
{Array(parseInt(numberIni2))
.fill(1)
.map((value, key2) => {
return (
<div>
{arraySelect[key2] && (
<>
<label>
<font size="2">
<label>
<font size="2">
{" "}
{" "}
<div class="row">
<div class="col-sm-9">
<h6>
Segundos Clasificados Por Grupo
</h6>
<label>
<font size="2">
Clasificarán a Siguiente Fases Los
de Mejor Promedio :
<select
onChange={(e) =>
handleChange(
0,
e.target.value
)
}
name=""
id=""
>
<option value="seleccione">
Seleccione
</option>
{Array(parseInt(numberIni2))
.fill(1)
.map((value, key) => {
return (
<option
value={numberIni2 - key}
>
{numberIni2 - key}{" "}
Equipos
</option>
);
})}
</select>{" "}
{console.log(arraySelect)}{" "}
Ubicados en la
{rows.length === 1 && (
<div
className="col-sm-2"
style={{
top: "-27px",
right: "-135%"
}}
>
<button
type="submit"
className="btn btn-primary"
onClick={() => {
setSelect_select2(
selectedNumbers[0]
);
}}
>
crear
</button>
</div>
)}
</font>{" "}
</label>
{Array(parseInt(numberIni2))
.fill(1)
.map((value, key2) => {
return (
<div>
{arraySelect2[key2] && (
<>
<h6>
Segundos Clasificados
Por Grupo
</h6>
<label>
<font size="2">
Clasificarán a
Siguiente Fases Los de
Mejor Promedio :
<select
onChange={(e) =>
handleChange(
key2 + 1,
e.target.value
)
}
name=""
id=""
>
<option value="seleccione">
Seleccione
</option>
{arraySelect2[
key2
].map(
(value, key3) => {
return (
<option
value={
arraySelect2[
key2
][key3]
}
>
{
arraySelect2[
key2
][key3]
}{" "}
Equipos
</option>
);
}
)}
</select>{" "}
Ubicados en la
{key2 ===
rows.length - 2 && (
<div
className="col-sm-2"
style={{
top: "-27px",
right: "-135%"
}}
>
<button
type="submit"
className="btn btn-primary"
onClick={() => {
setSelect_select2(
selectedNumbers[
key2 + 1
]
);
}}
>
crear
</button>
</div>
)}
</font>{" "}
</label>
</>
)}
</div>
);
})}
</div>
<div
className="col-sm-2"
style={{ top: "-40px" }}
>
{rows.map((e, index) => (
<Row
nombre={e.nombre}
index={index}
onChange={(index, value) =>
handleOnChange(index, value)
}
key={index}
/>
))}
</div>
</div>{" "}
</font>{" "}
</label>
</font>{" "}
</label>
</>
)}
</div>
);
})}
</div>
) : (
<></>
)}
{numberIni2 && (
<input
onClick={() => resetFormtodo()}
type="button"
value="Reiniciar"
/>
)}
</div>
)}
</div>
</div>
</div>
);
}
export default test;//row.js
const Row = (props) => {
const { onChange, onRemove, nombre, index } = props;
console.log(props);
return (
<div>
<h6> </h6>
<br/>
<br/>
<br/>
<input
disabled
value={nombre * 1 + 1 + " Posición"}
onChange={(e) => onChange(index, e.target.value)}
placeholder="Decrementar"
/>
</div>
);
};
export default Row;my algorithm does the following:
cuando se inicia aparece un select y un input donde se deben agregar cualquier valor luego de darle en el boton "generar".
despues me genera un select con la cantidad de numeros que coloque en el input, luego selecciono algún numero en el select que me aparece, luego le doy al boton que dice "generar select".
despues me genera un select y un input de forma dinamica , y cada vez que selecciono un numero en el select y le doy al boton "crear" se me genera otro select de forma dinamica con los valores restantes.
Lo que necesito
Cada vez que le doy Click a los Botones Crear (Cual es este Botón, veo 2 que dicen Generar, no crear?), quiero que los select dinámico (Cuales son los select dinámico veo 2 select) se desactiven y que solo deje seleccionar el select dinámico (cual es este otro select??)
https://codesandbox.io/s/misty-cache-ppes4?file=/src/App.js
Seguro hay varias formas de hacerlo, pero yo te recomiendo esta manera que está algo hardcodeada.
Sería una solución similar a la de tu otra pregunta: que se vaya deshabilitando los botones anteriores de mi array - reactjs.
El objetivo es condicionar qué tipo de
<Select>se mostrará, si uno con su atributodisabledhabilitado u otro con el mismo atributo deshabilitado.El condicionamiento es parecido, o casi igual, al de la pregunta que te cité.
Con el primero sería ver si
rows.length === 1, es decir si estamos en el primer select.De ser así mostramos un select con el atributo
disabled={false}:Luego hacemos exactamente lo mismo pero preguntando lo contrario
rows.length !== 1.Y en caso positivo, esta vez ponemos el
disabled={true}:Una vez más, repetimos la misma lógica exactamente igual pero esta vez haciendo la validación para ver si estamos en el último select preguntando
key2 === rows.length - 2.De ser así, mostramos el select con su
disabled={false}:Por ultimo, repetimos el mismo procedimiento anterior preguntado lo contrario
key2 !==rows.length - 2y asegurándonos de que el select quede deshabilitado en caso de que no sea el ultimo:Pero de esta manera perderíamos el número que seleccionamos en cada select desactivado.
Para evitar ese problema, hay que ponerle en el atributo
valuede cada select desactivado el valor del número que se guardó en el arrayselectedNumbers.Serían
value={ selectedNumbers[key2]}yvalue={ selectedNumbers[key2 + 1]}respectivamente en cada select.Todo el código quedaría así:
Pruébalo para ver si era lo que estabas buscando.