Tengo una entrada de texto que estoy tratando de usar para crear nuevas tags a través de ganchos. Sin embargo, cuando ingreso el valor y presiono enter, no sucede nada. Lo busqué en Google y me dijeron que hiciera el type=text pero esto no lo solucionó. Aquí está el código:
import React, { useState } from 'react'; import AddIcon from '@mui/icons-material/Add'; import MaximizeIcon from '@mui/icons-material/Maximize'; import './styles.css'; const Card = ({ id, pic, name, email, company, skill, average, grades }) => { const [clicked, setClicked] = useState(false); const [tags, setTags] = useState([]); return ( <div className='card' id={id}> <img src={pic} alt='avatar' className='img' /> <div className='list'> <h1>{name}</h1> <div className='properties'> <p>Email: {email}</p> <p>Company: {company}</p> <p>Skill: {skill}</p> <p>Average: {average}</p> </div> <input type='text' placeholder='Add a tag' onSubmit={(e) => { setTags(...tags, e.target.value); console.log(tags); }} /> {clicked && ( <div className='grades'> {grades.map((grade, index) => ( <p>{`Test ${index}: ${grade}%`}</p> ))} </div> )} </div> <button onClick={() => setClicked(!clicked)}> {!clicked ? ( <AddIcon fontSize='large' /> ) : ( <MaximizeIcon fontSize='large' /> )} </button> </div> ); }; export default Card; ¿Cómo hago para que envíe nuevas tags al gancho setTags ?
Puedes usar el evento keyDown
onKeyDown = { (e) => { if (e.key === 'Enter') { setTags(...tags, e.target.value); } } }