Quiero console.log() múltiples valores de cinco menús desplegables diferentes con un clic de botón. He hecho esto para un menú desplegable, pero no sé cómo hacerlo para más. Todavía soy un principiante.
Aquí está mi código:
export default function Suma() { const typedemande = [ { value: "first", label: "first" }, { value: "second", label: "second" }, ]; const [message, setMessage] = useState(''); const handleChange = event => { setMessage(event); }; const handleClick = event => { event.preventDefault(); console.log(message); }; return ( <div> <div className="col-lg"> <Select placeholder="choose" id="message" className="react-dropdown " name="message" onChange={handleChange} value={message} isClearable isSearchable={false} classNamePrefix="dropdown" options={typedemande} /> </div> <div className="text-center"> <button className="mr-2 btn btn-primary" onClick={handleClick}>Click me</button> </div> </div> ); };Espero que estés buscando este:
export default function App() { const typedemande = [ { value: "first", label: "first" }, { value: "second", label: "second" }, { value: "third", label: "third" }, { value: "fourth", label: "fourth" }, { value: "five", label: "five" }, ]; const [showAll, setShowAll ] = useState([]); const [dropdowns,setDrodowns] = useState({ 'message1': '', 'message2': '', 'message3': '', 'message4': '', 'message5': '', }); const handleChange = (event) => { setDrodowns({...dropdowns,[event.target.name]:event.target.value}); } const handleClick = (event) => { event.preventDefault(); // if you use the element inside `form` then it would prevent to submit console.log(dropdowns);//to log the values in console setShowAll(Object.values(dropdowns));// to show the changes in UI } return ( <div> <div className="col-lg"> <Select name="message1" onChange={handleChange} value={"second"} options={typedemande} /> <Select name="message2" onChange={handleChange} value={"second"} options={typedemande} /> <Select name="message3" onChange={handleChange} value={"second"} options={typedemande} /> <Select name="message4" onChange={handleChange} value={"second"} options={typedemande} /> <Select name="message5" onChange={handleChange} value={"second"} options={typedemande} /> </div> <hr/> <ul> { showAll.map((val,i)=><li key={i}>{i+1} --- {val}</li>) } </ul> <hr/> <div className="text-center"> <button className="mr-2 btn btn-primary" onClick={handleClick}>Click me</button> </div> </div> ); }Para obtener más información, consulte el enlace del código sandbox
Editar: según los comentarios de los usuarios, edité la respuesta
Podrías pasar un parámetro a tu handleChange .
const handleChange = (event, position) => { console.log(position); }; <Select onChange={(e) => handleChange(e, 1)} /> <Select onChange={(e) => handleChange(e, 2)} /> <Select onChange={(e) => handleChange(e, 3)} />Al mejorar la respuesta de axtck, puede obtener cada valor seleccionado como se muestra a continuación
import React, {useState} from 'react'; import Select from 'react-select'; export function App(props) { const typedemande = [ { value: "first", label: "first" }, { value: "second", label: "second" }, ]; const [messages, setMessages] = useState([]); const handleChange = (event, pos) => { console.log(pos) console.log(event.value) let mz = [...messages]; if (mz.length > 0 && mz.findIndex(msg => msg.index == pos) > -1) { mz[mz.findIndex(msg => msg.index == pos)] = event.value; setMessages(mz); } else { mz.push({ index: pos, value: event.value }); setMessages(mz); } }; const handleClick = event => { event.preventDefault(); for (let i = 0; i < messages.length; i++) console.log(messages[i].value) }; return ( <div> <div className="col-lg"> <Select placeholder="choose" id="message" className="react-dropdown " name="message" onChange={(e) => handleChange(e, 1)} value={messages[0] ? messages[0].label : ''} isClearable isSearchable={false} classNamePrefix="dropdown" options={typedemande} /> <Select placeholder="choose" id="message" className="react-dropdown " name="message" onChange={(e) => handleChange(e, 2)} value={messages[1] ? messages[1].label : ''} isClearable isSearchable={false} classNamePrefix="dropdown" options={typedemande} /> </div> <div className="text-center"> <button className="mr-2 btn btn-primary" onClick={handleClick}>Click me</button> </div> </div> ); }