Soy nuevo en React, aprendo mediante la codificación, aquí tengo el componente A, que tiene un elemento de selección con elementos de menú (todo el material ui), cuando el usuario hace clic en el elemento de selección y elige del menú desplegable, justo después de que el usuario haya elegido el componente completo, debe mostrarse :ninguno, ¿es esto posible? quiero decir que el usuario ya no debería poder ver el elemento seleccionado en la página
El inglés no es mi lengua materna, por lo que puede haber errores.
Se agradecen sugerencias/ayuda.
componente A:
const A: React.FC<AProps> = (props) => { const handleChange = (e: React.ChangeEvent<{ value: unknown }>) => { const site = e.target.value as string; dispatch(changeActiveSite(site)); if (site) { dispatch(getAnalysers(site)); } else { dispatch(clearSiteData(site)); } }; const sites = [ { ident: "", name: "None", }, ].concat(sitess); return ( <React.Fragment> <FormControl className={classes.formControl}> <InputLabel id="site-select-input-label">site</InputLabel> <Select id="site-select" value={currentSiteId} labelId="site-select-input-label" onChange={(e) => handleChange(e)} > {sites.map((site) => { return ( <MenuItem key={site.ident} value={site.ident}> {site.name} </MenuItem> ); })} </Select> </FormControl> </React.Fragment> ); }; ese componente está en el componente B así: <div > <A site={site} /> </div>
Imaginemos su MenuItem.js , específicamente, su render() y constructor() . Querrá que se pueda ocultar/no mostrar, o ver/mostrar. Use un atributo de estado para hidden para controlar esto, su renderizado probablemente se verá como...
constructor(props) { super(props); this.state = { 'hidden':false, }; } render () { if(this.state.hidden) { return ''; } return ( <div onClick={(e) => this.handleOnClick(e)} > {this.props.value} </div> ); } ¡Observe que también agregué un handleOnClick(e) arriba! Eso simplemente llamará a this.setState({'hidden':true}) , así como...
handleOnClick(e) { this.setState({'hidden':true}); }Tengo una respuesta a una pregunta similar en otro lugar, si también podría ayudar: Cómo configurar el estado de un componente desde otro componente en React