Estoy tratando de representar un modal con solo hacer clic en un botón. Estoy renderizando el Modal perfectamente bien. Y tengo dos menús desplegables en el modal que pueden duplicarse cuando hacemos clic en el botón Agregar más en el modal. Cuando hago clic en el botón Agregar más, los menús desplegables se duplican.
El problema aquí es:
1. Cuando elegimos la primera opción en el primer menú desplegable y seleccionamos la segunda opción en el segundo menú desplegable, el segundo menú desplegable no muestra ningún valor para nosotros. Y el valor del primer menú desplegable se actualiza con su segundo valor.
2. Cuando agregamos el otro conjunto de menús desplegables, el problema 1 está ahí y con ese problema anterior, los valores del primer menú desplegable se sincronizan con todos los primeros menús desplegables.
Puede echar un vistazo al problema en el CodeSandbox que he adjuntado a continuación:
https://codesandbox.io/s/winter-wildflower-oz7do?file=/src/App.js
- Cada vez que elegimos la primera opción en el primer menú desplegable y seleccionamos la segunda opción en el segundo menú desplegable, el segundo menú desplegable no muestra ningún valor para nosotros. Y el valor del primer menú desplegable se actualiza con su segundo valor.
Esto es lo que le dices al código que haga al llamar a la función
const handleChange = (event) => { setReview(event.target.value); };En el momento en que cambia la opción, el valor de revisión se actualiza; por lo tanto, el valor en su primer menú desplegable está cambiando, no el valor de opción de su segundo menú desplegable.
- Cuando agregamos el otro conjunto de menús desplegables, el problema 1 está ahí y con el problema anterior, los valores del primer menú desplegable se sincronizan con todos los primeros menús desplegables.
Esto es lo que le dices al sistema que haga también. Porque solo está actualizando un estado de cadena que declaró con const [review, setReview] = useState("");
Como habrás notado, el problema tiene dos caras aquí. El enfoque sería que 1) se asegure de que está actualizando el valor correcto (revisión u opción) y 2) que guarde los valores actualizados dentro de las matrices que ya creó y que complete con otro objeto una vez que haga clic en "+ agregar más", es decir, aquellos a las matrices:
const [reviewInput, setReviewInput] = useState([{ review: "" }]); const [reviewOption, setReviewOption] = useState([{ option: "" }]);Lo que significa que, para actualizar la matriz de entrada de revisión, puede hacer lo siguiente:
const handleChangeReviewInput = (event, index) => { setReviewInput([ ...reviewInput.map((item, key) => key === index ? { review: event.target.value } : item ) ]); };La función está comprobando la posición en la matriz que intenta cambiar. Si se encuentra: actualice la entrada con el valor dado.
En su representación desplegable:
<Select labelId="demo-simple-select-standard-label" id="demo-simple-select-standard" value={reviewInput.review} // taking the review string of your item in the array onChange={(e) => handleChangeReviewInput(e, index) // passing the index (position in the array) } label="Review" >...</Select>Y algo similar puedes hacer con tus opciones de revisión:
const handleChangeOption = (event, index) => { setReviewOption([ ...reviewOption.map((item, key) => key === index ? { option: event.target.value } : item ) ]); };y
<Select labelId="demo-simple-select-standard-label" id="demo-simple-select-standard" value={item.option} // taking option string from your item in the array onChange={(e) => handleChangeOption(e, index)} // passing index label="Option" >...</Select>Vea la versión de trabajo: https://codesandbox.io/s/jovial-greider-9uthk?file=/src/App.js
En general, es posible que desee considerar tener una matriz tanto para su entrada de revisión como para su opción de revisión; y luego tener una función para actualizar la entrada de revisión o la opción.