Блог

При нажатии на значок изображения должна открыться галерея изображений. Однако в этом случае это не работает. Интересно то, что точная реализация работает на другой странице. Ниже приведен компонент, который я затем вызываю на страницу. Реализация, которая работает, также является компонентом, вызываемым на отдельную страницу. Я не вижу никакой принципиальной разницы, которая могла бы объяснить ошибку. Ошибка, связанная с этим, также не регистрируется. Кто-нибудь знает, что может быть не так, глядя на это? Или может указать мне правильное направление для устранения неполадок?

 
    export default function Step1AddItems() {
    
    const [image, setImage] = useState({ preview: "", raw: "" });
    
    const handleItemChange = e => {
       if (e.target.files.length) {
          setImage({
            preview: URL.createObjectURL(e.target.files[0]),
            raw: e.target.files[0]
          });
        }
      };

    const handleItemUpload = async e => {
        e.preventDefault();
        const formData = new FormData();
        formData.append("image", image.raw);

        await fetch("", {
          method: "POST",
          headers: {
            "Content-Type": "multipart/form-data"
          },
          body: formData
        });
      }; 
    
      // if(props.currentStep !== 1) {
      //   return null;
      // }

  

// Разметка для пользовательского интерфейса шага 1

 
    return(
            
        <Row>
        <Col size="md-6" fixed>
    
        <div>  
        <label htmlFor="item-upload-button">
          {image.preview ? (
            <img src={image.preview} alt="dummy" width="300" height="300" />
          ) : (
            <img src={require("../../images/store.jpg")} style={{justifyContent: "center", alignItems: "center"}} alt="placeholder" width="100" height="100" />
            // <>
            //   <span className="fa-stack fa-2x mt-3 mb-2">
            //     <i className="fas fa-circle fa-stack-2x" />
            //     <i className="fas fa-store fa-stack-1x fa-inverse" />
            //   </span>
            //   {/* <h5 className="text-center">Upload your photo</h5> */}
            // </>
          )}
        </label>
               <input 
               type="file" 
               id="upload-button"
               style={{ display: "none" }} 
               onChange={handleItemChange} />
               <br/>
               <button onClick={handleItemUpload}>Upload</button>
              </div>       
    
          <div>
          <label htmlFor="item-upload-button">
          {image.preview ? (
            <img src={image.preview} alt="dummy" width="300" height="300" />
          ) : (
            <img src={require("../../images/store.jpg")} style={{justifyContent: "center", alignItems: "center"}} alt="placeholder" width="100" height="100" />
            // <>
            //   <span className="fa-stack fa-2x mt-3 mb-2">
            //     <i className="fas fa-circle fa-stack-2x" />
            //     <i className="fas fa-store fa-stack-1x fa-inverse" />
            //   </span>
            //   {/* <h5 className="text-center">Upload your photo</h5> */}
            // </>
          )}
        </label>
               <input 
               type="file" 
               id="upload-button" 
               style={{ display: "none" }} 
               onChange={handleItemChange} />
               <br />
               <button onClick={handleItemUpload}>Upload</button>
               </div>
               <br />
    
          <div>
         <label htmlFor="item-upload-button">
          {image.preview ? (
            <img src={image.preview} alt="dummy" width="300" height="300" />
          ) : (
            <img src={require("../../images/store.jpg")} style={{justifyContent: "center", alignItems: "center"}} alt="placeholder" width="100" height="100" />
            // <>
            //   <span className="fa-stack fa-2x mt-3 mb-2">
            //     <i className="fas fa-circle fa-stack-2x" />
            //     <i className="fas fa-store fa-stack-1x fa-inverse" />
            //   </span>
            //   {/* <h5 className="text-center">Upload your photo</h5> */}
            // </>
          )}
        </label>
               <input type="file" 
               id="upload-button" 
               style={{ display: "none" }} 
               onChange={handleItemChange} /> 
               <br />
               <button onClick={handleItemUpload}>Upload</button>
               </div>
                
      
          <div>
          <label htmlFor="item-upload-button">
          {image.preview ? (
            <img src={image.preview} alt="dummy" width="300" height="300" />
          ) : (
            <img src={require("../../images/store.jpg")} style={{justifyContent: "center", alignItems: "center"}} alt="placeholder" width="100" height="100" />
            // <>
            //   <span className="fa-stack fa-2x mt-3 mb-2">
            //     <i className="fas fa-circle fa-stack-2x" />
            //     <i className="fas fa-store fa-stack-1x fa-inverse" />
            //   </span>
            //   {/* <h5 className="text-center">Upload your photo</h5> */}
            // </>
          )}
        </label>
               <input 
               type="file" 
               id="upload-button" 
               style={{ display: "none" }} 
               onChange={handleItemChange} />
               <br />
               <button onClick={handleItemUpload}>Upload</button>
               </div>
               
              </Col>
              </Row>

)}```
  

Это была опечатка — я изменил <label htmlFor=«item-upload-button»> на <label htmlFor=«upload-button»> и это сработало — открылось окно галереи изображений.