0
56
ViewsMostrar las próximas opciones de selección con lógica para el campo de selección seleccionado anterior
Recibo los datos de api como citas anidadas en objetos de estado
Ejemplo:
const data = [ { id: 1, name: 'State One', cities: [ { id: 1, state: 'State One', name: 'City One' }, { id: 2, state: 'State One', name: 'City Two' }, { id: 3, state: 'State One', name: 'City Three' } ] }, { id: 2, name: 'State 2', cities: [ { id: 4, state: 'State 2', name: 'City 5' } ] } ] Tengo que dar las opciones Seleccionar de las Ciudades según el Estado Padre. Digamos que el usuario seleccionó State One en el campo de selección de estado y luego debería haber solo opciones de ciudades del State One en el siguiente campo de ciudad. ¿Cómo configurarlo?
Corrientemente; He creado una estructura hueca de Seleccionar campos de entrada pero no puedo encontrar nada sobre cómo puedo configurarlo. Necesito poca ayuda o alguna idea para empezar.
Este es el código actual;
<Col lg="6" md="12" className="mb-1"> <Label className="form-label py-1" for="state"> State </Label>{' '} <Row></Row> <Select id="state" options={stateOptions} defaultValue={stateOptions[0]} onChange={(choice) => console.log(choice.value)} /> </Col> <Col lg="6" md="12" className="mb-1"> <Label className="form-label py-1" for="city"> City </Label>{' '} <Row></Row> <Select id="city" classNamePrefix="select" options={cityOptions} onChange={(choice) => console.log(choice.value)} /> </Col>He visto algunos artículos, pero sugieren usar bibliotecas npm, pero no puedo usarlas porque los datos son muy diferentes de los que quiero manejar.
1 answers
Answer question0
Puede realizar un seguimiento del estado seleccionado actualmente y actualizar las ciudades que toma la segunda selección.
También se agregaron algunos comentarios para explicar qué están haciendo las funciones.
export default function App() { const [state, setState] = useState(null); const [city, setCity] = useState(null); const onStateChange = (option) => { setState(option); // to remove city if a different state is selected if (!option || option?.value !== state?.value) setCity(null); }; const onCityChange = (option) => { setCity(option); }; // a separate useState for cities is not needed // as cities depend on the selected state, it can be determined when state changes const cities = useMemo(() => { if (!state) return []; return getOptions(data.find((el) => el.id === state.value).cities); }, [state]); return ( <div> <Select options={states} value={state} onChange={onStateChange} /> <hr /> <Select options={cities} value={city} onChange={onCityChange} /> </div> ); } 