Comenzando a probar y aprender React de HTML estándar, realmente no entiendo la vinculación de ciertos objetos y eventos con Arrays.
Básicamente, quiero tener un menú desplegable en el que el usuario pueda seleccionar una opción y luego hacer que ese menú desplegable llene algunos campos de texto con ciertos valores desde dentro de la matriz.
En este caso, el campo de texto 1 lee el tipo de archivo, el campo de texto 2 lee la profundidad de bits
El código actual está debajo. Tenga en cuenta que el uso de componentes de espectro es un selector de sp en lugar de un menú desplegable
No sé cómo hacer que el controlador lea otra cosa que no sea el evento y probablemente este código sea totalmente incorrecto.
Cualquier consejo sería muy apreciado.
import React, { useState } from "react"; const SaveOptions = () => { //Default Options HOOKS const [filetype, setFileType] = useState("TIFF"); const [textfieldValue, setTextfieldValue] = useState("16"); //ARRAY const filetypeOptionsArray = [ { name: "TIFF", extention: "TIFF", bitdepth: "16" }, { name: "PSD", extention: "PSD", bitdepth: "16" }, { name: "JPG", extention: "JPG", bitdepth: "8" }, ] // Handlers const handleFiletypeChange = (e) => { setFileType(e.target.value); setTextfieldValue(e.target.value); }; return ( <div style={{ border: "1px solid #555", padding: "5px", borderRadius: "5px" }}> <div className="row" > <sp-picker size="s" style={{ flexGrow: 1 }}> <sp-menu slot="options" onClick={handleFiletypeChange}> { filetypeOptionsArray.map((e) => { return <sp-menu-item selected={filetype === e.value ? true : null} key={e.name} value={e.name}>{e.name}</sp-menu-item> }) } </sp-menu> </sp-picker> </div> <sp-textfield value={filetype}></sp-textfield> <sp-textfield value={textfieldValue}></sp-textfield> </div> ); } export default SaveOptions;Creo que esto es lo que estás tratando de hacer. La mayor parte de su código es correcto, excepto que adjunta la función onChange a la propiedad onClick en lugar de la propiedad onChange
He adjuntado un ejemplo básico a continuación porque usó elementos html personalizados en su código a los que no tengo acceso.
const people = [ { name: "John Doe", age: 26, }, { name: "Jason Bourne", age: 32, }, { name: "Steve Wang", age: 19, }, ]; function App() { const [option, setOption] = React.useState(null); const [text, setText] = React.useState(""); const onChange = (ev) => { const val = ev.target.value; setOption(val); const person = people[val]; if (person) { setText(person.name + " is " + person.age); } }; return ( <div> <select value={option} onChange={onChange}> {people.map((person, index) => ( <option value={index} key={index}> {person.name} </option> ))} </select> <br /> <input type="text" value={text} onChange={(ev) => setText(ev.target.value)} /> </div> ); } ReactDOM.render(<App />, document.getElementById("root")); <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script> <div id="root"></div>