Esta es la pregunta editada después de enviar la respuesta.
En este código, mi navegador de archivos ahora se abrirá directamente, pero cuando envíe el botón final, no obtendré el estado actualizado.
uploadImage() convertirá la imagen a base 64 y luego actualizará el valor en el estado.
uploadCode() se utilizará para enviar los datos por última vez después de hacer clic en el botón Enviar. He comprobado que no obtengo el valor actualizado del estado en esta función de acuerdo con esta lógica, es decir, label & htmlFor.
Mi lógica anterior estaba bien cuando hacía clic en cargar imagen div y luego configuraba la variable de estado mostrar imagen de falso a verdadero; El botón Elegir archivo solo está visible cuando el estado es verdadero. El resto, toda la implementación es la misma y funcionaba bien. Pero ahora puedo obtener el estado actualizado, es por eso que cuando hago clic en el botón Enviar, no obtengo la imagen porque el estado no está actualizado.
constructor(props, context) { super(props, context); this.inputFile = React.createRef() this.onButtonClick = this.onButtonClick.bind(this); } uploadImage = (e) => { console.log('function called') /*************New Edit*************/ // getting the image through base64 string and then update it on state; this.setState({image: myBase64String}, () => { console.log(this.state.image )}); // Return the string through above console } uploadCode = () => { const {image} = this.state; console.log(image);//returns undefined; } render(){ return ( <div><Button onClick={()=>this.uploadCode()} >SUBMIT</Button></div> <div className={cx(styles['display-tablecell'], styles['pl-lg'])}> <FormControl style={{display: 'none'}} id="formControlsFile" type="file" label="File" onChange={this.uploadImage} name="image" ref={this.inputFile} /> <label style={{display: 'inline-block'}} // onClick={this.onButtonClick} htmlFor="formControlsFile" <---- binding to the input tag using the same id > <i className={cx(fontStyles.fa, fontStyles['fa-image'])} /> </label> </div> ) }Está intentando abrir el explorador de archivos cuando el usuario hace clic en <span /> . Sin embargo, no necesita simular el comportamiento del click para lograrlo. Puede hacer uso de la etiqueta html <label /> para vincular la funcionalidad onclick de <input type="file" /> . Así es cómo -
class App extends Component { constructor(props, context) { super(props, context) /* You won't need these this.inputFile = React.createRef() this.onButtonClick = this.onButtonClick.bind(this) */ } uploadImage = (e) => { console.log('function called') /*************New Edit*************/ // getting the image through base64 string and then update it on state; this.setState({image: myBase64String}, () => { console.log(this.state.image )}); // Return the string through above console } /* You won't need these onButtonClick = () => { console.log('div clicked') this.inputFile.current.click() } */ uploadCode = () => { const {image} = this.state; console.log(image);//returns undefined; } render() { return ( <div><Button onClick={()=>this.uploadCode()} >SUBMIT</Button></div> <div className={cx(styles['display-tablecell'], styles['pl-lg'])}> <FormControl style={{display: 'none'}} id="formControlsFile" type="file" label="File" onChange={this.uploadImage} name="image" ref={this.inputFile} /> <label style={{display: 'inline-block'}} // onClick={this.onButtonClick} htmlFor="formControlsFile" <---- binding to the input tag using the same id > <i className={cx(fontStyles.fa, fontStyles['fa-image'])} /> </label> </div> ) } } Puede encontrar más información sobre la <label /> aquí .