Tengo múltiples entradas de selección de reacción, cada una tiene su propia matriz de opciones separada. El problema que tengo es que ahora estoy seguro de cómo almacenar correctamente la salida de cada entrada seleccionada.
Quiero usar esta salida seleccionada para POST en mi backend, pero no estoy seguro de cómo hacerlo todo con una sola función de controlador.
Esto es lo que tengo hasta ahora, tengo 2 párrafos para generar el resultado apropiado de los campos seleccionados, pero parece que no puedo hacerlo funcionar.
Este es el codesandbox que tengo:
En su código, está utilizando el enlace useState () y cada vez que un usuario selecciona una opción, está configurando su variable de estado en el valor seleccionado. El problema es que cada vez que ejecuta la setSelectOptions({ e }) , sobrescribe los datos existentes con el valor de 'e'.
Lo que puede hacer es: Crear una función selectHandler que tome 2 argumentos (el nuevo valor y el valor al que corresponde en la variable de estado)
El código se verá algo como esto:
import "./styles.css"; import Select from "react-select"; import { useEffect, useState } from "react"; export default function App() { const [selectOptions, setSelectOptions] = useState({ brand: "", model: "", color: "", bodyType: "", fuelType: "", transmission: "", location: "" }); const brandOptions = [ { value: "bmw", label: "Bmw" }, { value: "audi", label: "Audi" }, { value: "toyota", label: "Toyota" }, { value: "nissan", label: "Nissan" } ]; const transmissionOptions = [ { value: "automatic", label: "Automatic" }, { value: "manual", label: "Manual" } ]; useEffect(() => console.log(selectOptions), [selectOptions]) const handleChange = (e, type) => { setSelectOptions((previousState) => ({ ...previousState, [type]: e.value, })); }; return ( <div className="App"> selected brand: {selectOptions.brand} <br /> selected transmission:{selectOptions.transmission} <div className="mb-2" style={{ width: "40%", margin: "0 auto" }}> <Select value={selectOptions.brand} onChange={(e) => handleChange(e, "brand")} placeholder="Select brand" options={brandOptions} /> <Select value={selectOptions.transmission} onChange={(e) => handleChange(e, "transmission")} placeholder="Select transmission" options={transmissionOptions} /> </div> </div> ); }Solo como explicación, todo lo que estoy haciendo en la función setSelectOptions() es pasar los valores anteriores de la variable de estado y actualizar el valor que coincide con el campo de selección.
Nota: inserte este código en su proyecto, lo ejecuté y funcionó, ¡así que avíseme si ayudó!