Estoy un poco confundido, aquí hay un ejemplo con un par de entradas seleccionadas que tienen el mismo estado, consulte aquí: https://stackblitz.com/edit/get-selected-by-value-multi-select-react- agamk4?file=src/App.js así que por favor:
Para mayor claridad, aquí hay una captura de pantalla: https://www.awesomescreenshot.com/image/19798040?key=bb839c650c93b436066e03d33d5515b0 Espero que esto tenga sentido. ¿Cuál sería el mejor enfoque? Gracias.
He compartido el código en caso de un solo estado. Puede usar este método si solo desea un solo estado, pero tener varios estados para diferentes entradas seleccionadas tampoco será malo, ya que solo tiene 3 entradas. Tener un método de estado único sería útil si el número de entradas seleccionadas tuviera más.
import React, { useState } from 'react'; import Select from 'react-select'; function App() { const data = [ { value: 1, label: 'cerulean', }, { value: 2, label: 'fuchsia rose', }, { value: 3, label: 'true red', }, { value: 4, label: 'aqua sky', }, { value: 5, label: 'tigerlily', }, { value: 6, label: 'blue turquoise', }, ]; // set value for default selection const [selectedValue, setSelectedValue] = useState([ { value: [] }, { value: [] }, { value: [] }, ]); // handle onChange event of the dropdown const handleChange = (e, no) => { setSelectedValue( selectedValue.map((item) => { return selectedValue.indexOf(item) === no ? { value: Array.isArray(e) ? e.map((x) => x.value) : [] } : item; }) ); }; return ( <div className="App"> <Select className="dropdown" placeholder="Select Option" value={data.filter((obj) => selectedValue[0].value.includes(obj.value))} // set selected values options={data} // set list of the data onChange={(event) => handleChange(event, 0)} // assign onChange function isMulti isClearable /> <br /> <Select className="dropdown" placeholder="Select Option" value={data.filter((obj) => selectedValue[1].value.includes(obj.value))} // set selected values options={data} // set list of the data onChange={(event) => handleChange(event, 1)} // assign onChange function isMulti isClearable /> <br /> <Select className="dropdown" placeholder="Select Option" value={data.filter((obj) => selectedValue[2].value.includes(obj.value))} // set selected values options={data} // set list of the data onChange={(event) => handleChange(event, 2)} // assign onChange function isMulti isClearable /> {selectedValue && ( <div style={{ marginTop: 20, lineHeight: '25px' }}> <div> <b>Selected Value: </b> {JSON.stringify(selectedValue, null, 2)} </div> </div> )} </div> ); } export default App;{selectedValue && ( <div style={{ marginTop: 20, lineHeight: '25px' }}> <div> <b>Selected Values: </b> <span>{ selectedValue.map(item => item.value.length !== 0 ? <li>{data.filter(data => data.value === item.value[0])[0].label}</li> : <li>No value selected</li> ) }</span> </div> </div> )}