En el siguiente componente del formulario, ¿cómo podemos ocultar ciertos componentes de entrada?
#1 ¿Cómo podemos pasar display: none a cierto componente? # 2 intentó establecer el estado y el montaje, pero arrojó errores durante el renderizado.
const inputStyle = { display:none } y pase el estilo = {inputStyle} para efectuar ciertos componentes
¿Hay alguna forma efectiva de representar condicionalmente el siguiente formulario y ocultar los diferentes componentes para diferentes dominios?
import React from 'react' class ClassComponentForm extends React.Component { state = {} componentDidMount(){ this.setState(emptyForm) } handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }) } render(){ return( <div id='classComponentForm'> <h2> Please Enter Your Information - Class </h2> <form id='form'> <label htmlFor='nameInput'> Name: </label> <input id='nameInput' name='name' type='text' placeholder='Please type your name' value={this.state.name} onChange={(e) => this.handleChange(e)} /> <label htmlFor='emailInput'> Email: </label> <input id='emailInput' name='email' type='text' placeholder='Please type your email' value={this.state.email} onChange={(e) => this.handleChange(e)} /> <label htmlFor='zipcodeInput'> Zipcode: </label> <input id='zipcodeInput' name='zipcode' type='text' placeholder='Please type your zipcode' value={this.state.zipcode} onChange={(e) => this.handleChange(e)} /> <label htmlFor='dateInput'> Date: </label> <input id='dateInput' name='date' type='date' value={this.state.date} onChange={(e) => this.handleChange(e)} /> </form> </div> ) } } export default ClassComponentFormhandleChange claves de configuración dentro del objeto de estado en función del nombre de entrada (debido a e.target.name ) que definió en el elemento de entrada. Ya accede a este valor dentro del value prop value={this.state.email}
Lo mismo se puede usar para ocultar condicionalmente cada entrada. Este es un ejemplo de cómo puede ocultar la entrada de correo electrónico.
{this.state.email && <input id='emailInput' name='email' type='text' placeholder='Please type your email' value={this.state.email} onChange={(e) => this.handleChange(e)} />}