0
101
VisualizaçõesValor de múltiples cuadros combinados en React
Estoy creando una página en la que el usuario elige cargar algunos archivos, luego elige el tipo de archivo de cada archivo de un cuadro combinado y luego envía. Los 'informes' son los archivos que el usuario eligió cargar, los asigné para mostrarlos en filas y luego el usuario puede elegir para cada archivo el tipo de archivo cruzado. ¿Cómo obtener el valor en el cuadro combinado para cada archivo que cargó el usuario? Mi código se ejecuta solo para un archivo, pero ¿cómo se puede editar para varios cuadros combinados?
const [fileType, setFileType] = useState(''); const fileChangeHandler = (event:React.ChangeEvent<HTMLSelectElement>) => { setFileType(event.target.value); } return ( <div> {reports.map((report, i) => ( <div className="file-row" key={i}> <div>{report.name}</div> <div> <select className='frm-select' value={fileType} onChange={fileChangeHandler}> <option value="" selected disabled hidden>Select File Type</option> {fileTypeOptions.map((option) => ( <option key={option.id}>{option.FileName}</option> ))} </select> </div> {renderFileRow(report, i,fileType)} </div> ))} </div> );1 Respostas
Responde à pergunta0
Le sugiero que use un mapa (como un objeto pero más dinámico) en lugar de una cadena simple. No estoy seguro de que tenga report.id o no, así que estoy usando report.name para este ejemplo
//create an empty map for all file types const [fileTypes, setFileTypes] = useState<{ [key: string]: string }>({}); const fileChangeHandler = (event:React.ChangeEvent<HTMLSelectElement>, reportName: string) => { //it will return an object for all file types setFileTypes({ ...fileTypes, [reportName]: event.target.value }); } return ( <div> {reports.map((report, i) => ( <div className="file-row" key={i}> <div>{report.name}</div> <div> <select className='frm-select' value={fileTypes[report.name]} onChange={(e) => fileChangeHandler(e, report.name)}> <option value="" selected disabled hidden>Select File Type</option> {fileTypeOptions.map((option) => ( <option key={option.id}>{option.FileName}</option> ))} </select> </div> {renderFileRow(report, i,fileType)} </div> ))} </div> ); Los resultados finales de fileTypes serán así
{ "report name 1": "pdf", "report name 2": "image" }Así es como accedemos al tipo de archivo para cada informe
fileTypes[report.name]