#reactjs
Вопрос:
import React from 'react'; import styled from 'styled-components'; const Button = styled.button; const FileUploader = props =gt; { const hiddenFileInput = React.useRef(null); const handleClick = event =gt; { hiddenFileInput.current.click(); }; const handleChange = event =gt; { const fileUploaded = event.target.files[0]; const reader = new FileReader(); reader.onload = () =gt; { if(reader.readyState === 2) { this.setState({profileImg: reader.result}) } } reader.readAsDataURL(event.target.files[0]) props.handleFile(fileUploaded); }; const profileImg ='https://gravatar.com/avatar/daaa57535a70b34bc8674de53d02dc25?s=200amp;d=mpamp;r=pg' return ( lt;gt; lt;img src={profileImg} class="img-fluid rounded-pill" alt="" /gt; lt;Button className="btn btn-secondary d-flex justify-content-start" type="button" onClick={handleClick} gt; lt;i className="fa fa-fw fa-camera"gt;lt;/igt; Change avatar lt;/Buttongt; lt;input type="file" accept="image/*" id="input" ref={hiddenFileInput} onChange={handleChange} style={{display:'none'}} /gt; lt;/gt; ); }; export default FileUploader;
Мой вопрос в том, как я могу заставить это работать, кнопка теперь работает как вход, как я хочу, но я, похоже, не могу profileImg
изменить ее в onChange
качестве нового входного изображения, которое я выбираю для ввода.