выбранное изображение не отображается на доске изображений - PullRequest
Новая
       11

выбранное изображение не отображается на доске изображений

0 голосов
/ 20 января 2019

На главной странице есть 2 столбца.Во-первых, это сетка изображений, которая будет содержать коллекцию изображений и доску изображений, на которой будет отображаться выбранное изображение, но первоначально у него будет изображение по умолчанию.Способ, основанный на классах, работает отлично, однако у меня возникают проблемы при использовании способа реакции.

Вот как я это сделал

redurs / images.js 

const initialState = {
  selectedImage: require('assets/images/image1.jpg')
};

export default function getSelectedImage(state = initialState, action) {
  switch (action.type) {
    case SELECT_IMAGE:
      return { ...state, selectedImage: action.payload.image};
    default:
      return state;
  }
}

imageboard / index.js 

const ImageBoard = (props) => {
  let canvasEl = React.useRef(null);
  const [selected, setSelected] = React.useState(null)
  const [canvasState, setCanvas] = React.useState(null)
  const [state, _] = React.useReducer(imagesReducer, {selectedImage: require('assets/images/image1.jpg')})


  const handleDeleteKey = event => {
    if (event.keyCode === 46 || event.keyCode === 8) {
      event.preventDefault();
      console.log('canvasState', canvasState); // null i get
      if (selected !== undefined) {
        canvasState.remove(selected);
        setSelected(undefined);
      }
    }
  }

  React.useEffect(() => {
    runs once on mount
    const canvasRef = new fabric.Canvas("canvas");
    document.addEventListener(
      "keydown",
      handleDeleteKey,
      false
    );
    canvasRef.on("object:selected", e => setSelected(e.target));
    canvasRef.on("selection:cleared", e => setSelected(undefined));
    setCanvas(canvasRef);
    // used to show default image at initial
    // setCanvasBackground(state.selectedImage, canvasRef);
   }, [])

   React.useEffect(() => {
    // runs every time new getSelectedImage is received, including initial render
     setCanvasBackground(props.getSelectedImage, canvasState);
   }, [props.getSelectedImage])

   const opacityChange =val => {
     canvasState.backgroundImage.setOpacity(val / 100);
     canvasState.renderAll();
   }


   const applyColor = e => {
     selected.setColor(e.hex);
     // canvasState is here null 
     canvasState.renderAll();
   }

   console.log('props', props)
   return (
     <Wrapper>
       <Row>
         <Column width={80}>
         <CanvasWrapper>
           <canvas
             id="canvas"
             ref={canvasEl}
             width={500}
             height={400}
             className="z-depth-1"
           />
           </CanvasWrapper>
         </Column>
         <Column width={20}>
          <Filter
            addText={addText}
            addSubtitle={addSubtitle}
            opacityChange={opacityChange}
            applyTextFilter={applyTextFilter}
            applyColor={applyColor}
            applyBlur={applyBlur}
          />
         </Column>
       </Row>
     </Wrapper>
   );
 }

images / index.js 

 const Images = props => {
   const [_, dispatch] = React.useReducer(imagesReducer, []);
   return (
     <React.Fragment>
       <Wrapper>
         {images.map(image => (
           <Image
             key={image.id}
             src={image.image}
             alt={image.category}
             onClick={() => dispatch({ type: SELECT_IMAGE, payload: image })}
           />
         ))}
       </Wrapper>
     </React.Fragment>
   );
 };

 export default Images;

Я разместил рабочий код в gist.Как я уже говорил, классовый подход работает, и у меня не возникает проблем с canvasState being null, но и canvasState, и выбранное изображение не отображаются в подходе с функциональными перехватами.

Здесь суть полного кода обоих способов

https://gist.github.com/MilanRgm/47c68ad9c2a5a295f32ffaab21f2bb26

...