Así que tengo el siguiente código:
function Crafting(props) { const craftItems = [ { key: 1, name: "Bronze sword", }, { key: 2, name: "Iron sword", }, { key: 3, name: "Steel sword", }, ]; const [item, setItem] = useState(); const [itemKey, setItemKey] = useState(); function onChangeHandler(event) { setItem(event.target.value); setItemKey(event.target.itemID); console.log(event); } function onSubmitHandler(event) { event.preventDefault(); console.log(item); console.log(itemKey); } return ( <Card className={classes.renderwin}> <form onSubmit={onSubmitHandler}> <label htmlFor="items">Select an item</label> <select name="items" onChange={onChangeHandler}> {craftItems.map((item) => ( <option key={item.key} itemID={item.key}> {item.name} </option> ))} </select> <Button type="submit">Craft item</Button> </form> </Card> ); }Quiero poder recuperar el valor clave original contra el artículo. Intenté usar "clave", luego agregué un accesorio personalizado llamado "itemID", pero ambos simplemente regresan como indefinidos. ¿Cómo recupero el ID según la selección de valor?
El problema es que básicamente puede almacenar solo un valor de opción y recuperarlo en el controlador para guardarlo en el estado.
item.key en el atributo de value del elemento de option .
<select name="items" onChange={onChangeHandler}> {craftItems.map((item) => ( <option key={item.key} value={item.key}> {item.name} </option> ))} </select> Acceda a la propiedad de value del objeto de evento onChange en el controlador y vuelva a convertirlo en un tipo de número antes de almacenarlo en el estado.
function onChangeHandler(event) { const { value } = event.target; setItemKey(Number(value)); } Al acceder al controlador de envío, use la clave de elemento almacenada para buscar craftItems itemKey objeto coincidente.
function onSubmitHandler(event) { event.preventDefault(); const item = craftItems.find(({ key }) => key === itemKey); console.log(item?.name); console.log(item?.key); } function Crafting(props) { const craftItems = [ { key: 1, name: "Bronze sword" }, { key: 2, name: "Iron sword" }, { key: 3, name: "Steel sword" } ]; const [itemKey, setItemKey] = React.useState(); function onChangeHandler(event) { const { value } = event.target; setItemKey(Number(value)); console.log({ value }); } function onSubmitHandler(event) { event.preventDefault(); const item = craftItems.find(({ key }) => key === itemKey); console.log(item && item.name); console.log(item && item.key); } return ( // <Card className={classes.renderwin}> <form onSubmit={onSubmitHandler}> <label htmlFor="items">Select an item</label> <select name="items" onChange={onChangeHandler}> {craftItems.map((item) => ( <option key={item.key} value={item.key}> {item.name} </option> ))} </select> <button type="submit">Craft item</button> </form> // </Card> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <Crafting />, rootElement ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root" />Coloque un valor en la option como esta:
{craftItems.map((item) => ( <option value={item.key} key={item.key}>{item.name}</option> ))}