El siguiente código ilustra una lista desplegable normal. Para indicar una lista desplegable, uso una flecha hacia abajo con arrow_drop_down. Esta flecha permanece estática para mí en cualquier estado de la lista (abierta o cerrada). Sin embargo, me gustaría que al hacer clic en la lista, la flecha cambie a arrow_drop_up.
Aquellos. de modo que con dos estados diferentes de la lista, habría dos flechas diferentes.
export default function FilterStatusCode() { const [values, setValues] = React.useState([]); const [isExpanded, setIsExpanded] = useState(false); const toggleExpand = () => { setIsExpanded(!isExpanded); }; return <> <div className="item-toggle-statuscode" onClick={toggleExpand}> <h6>Status Code</h6> <span class="material-icons"> arrow_drop_down </span> </div> { isExpanded && <div> <TagInput inputProps={{ placeholder: 'Add status code...' }} values={values} onChange={(values) => { setValues(values)}}> </TagInput> </div> } </>; }probar
<div className="item-toggle-statuscode" onClick={toggleExpand}> <h6>Status Code</h6> <span class="material-icons"> { isExpanded ? arrow_drop_up : arrow_drop_down } </span> </div>Puede elegir qué flecha usar según el estado actual:
// If the list is open show the `up` arrow // otherwise show the `down` arrow <span className={open ? "up" : "down"}></span>Tuve que improvisar en este ejemplo y usé Unicode en los nombres de las clases.
const { useState } = React; function Example() { return ( <div> <Item /> <Item /> </div> ); } function Item() { const [ input, setInput ] = useState(''); const [ open, setOpen ] = useState(false); function handleChange(e) { setInput(e.target.value); } function handleOpen() { setOpen(!open); } function handleClick() { console.log(input); } return ( <div className="item"> <div onClick={handleOpen} className="heading"> <span>Status code</span> <span className={open ? "up" : "down"}></span> </div> {open && ( <div> <input type="text" onChange={handleChange} value={input} /> <button type="button" onClick={handleClick} >Submit </button> </div> )} </div> ); } ReactDOM.render( <Example />, document.getElementById('react') ); .down:after { content: '\25BC'; } .up:after { content: '\25B2'; } .heading:hover { cursor: pointer; color: red; } .item { margin-bottom: 1em; } <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="react"></div>Documentación adicional