Quiero cambiar las propiedades de visibilidad con una función. Quiero que cuando el usuario haga clic en el botón cambie las propiedades visibles en el área de texto. ¿Cómo puedo hacer? ingrese la descripción de la imagen aquí
const [show, setShow] = useState(false) const changeVisibility = () => { setShow(!show) } return ( <> <div className="ui form"> {show && ( <div className="field"> <textarea rows="2"></textarea> </div> )} </div> <button onClick={changeVisibility}>show</button> </> );Aquí hay un ejemplo simple.
Use useState para administrar la visibilidad del área de texto.
Adjunte un controlador al botón que llama a una función que actualiza el estado.
Usa una clase llamada hidden . Inicialmente, el área de texto no lo tendrá, pero puede agregarlo condicionalmente si el estado actualizado se lo indica.
const { useEffect, useState } = React; function Example() { const [ visible, setVisible ] = useState(true); function handleClick() { setVisible(!visible); } return ( <div> <button onClick={handleClick}>Toggle visibilty</button> <textarea className={!visible && 'hidden'}></textarea> </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); .hidden { visibility: hidden; } <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>Cree una variable de estado para realizar un seguimiento del estado visible del área de textarea , luego, en la textarea del área de texto, agregue estilo para usar esa variable de estado. Luego onlick el evento, cambie la variable de estado a falso o verdadero.