Блог

У меня есть несколько компонентов «прямоугольника» в «Стене», которые должны менять цвет при нажатии. onClick в ‘Rectangle’ используется в другом компоненте, который сделает ‘Rectangle’ скрытым или нет. Я пытался сделать что-то подобное здесь, но я не могу изменять переменные внутри компонента «Прямоугольник».

Моя попытка

 customClickEvent={() =>{this.props.color = hidden_dictionary[count];}}
 

Wall.js

 const [count, setCount] = useState(0);
    const color_dictionary = {0: "bg-red-400", 1: "bg-blue-400", 2:"bg-green-400", 3:"bg-yellow-400"};

    return (
        <div className="grid grid-flow-col grid-rows-4 lg:py-20 gap-y-1 gap-x-1 lg:gap-y-6 lg:gap-x-6 justify-center items-center">
            <Rectangle type="wall">Fiji</Rectangle>
            <Rectangle type="wall">Hazelnut</Rectangle>
            <Rectangle type="wall">Mocha</Rectangle>
            <Rectangle type="wall">Australia</Rectangle>
            <Rectangle type="wall">Cook Islands</Rectangle>
            <Rectangle type="wall">Cube</Rectangle>
            <Rectangle type="wall">Vanilla</Rectangle>
            <Rectangle type="wall">Butter Pecan</Rectangle>
            <Rectangle type="wall">San Pellegrino</Rectangle>
            <Rectangle type="wall">Coconut</Rectangle>
            <Rectangle type="wall">Papua New Guinea</Rectangle>
            <Rectangle type="wall">Caramel</Rectangle>
            <Rectangle type="wall">Prince</Rectangle>
            <Rectangle type="wall">Guam</Rectangle>
            <Rectangle type="wall">Champagne</Rectangle>
            <Rectangle type="wall">T</Rectangle>
        </div>  
    )
 

Rectangle.js

     //ANSWER
    if(props.type === "answer") {
        width = "p-2";
        height = "h-12 lg:h-20";
        text_size = "text-2xl sm:text-4xl lg:text-5xl";
    }

    //WALL
    else if (props.type === "wall")
    {
        width = "w-20 sm:w-24 lg:w-52  cursor-pointer";
        height = "h-16 sm:h-20 lg:h-40";
        text_size = "text-1xl lg:text-4xl";
        color = props.color;
    }

    //VOWELS
    else if (props.type === "vowels")
    {
        width = "p-4";
        height = "";
        text_size = "text-3xl sm:text-4xl lg:text-5xl";
        color = "bg-blue-800 text-white";
    }

    else
    {
        width = "w-16 sm:w-36 lg:w-80";
        height = "h-12 sm:h-28 lg:h-64";
        text_size = "text-2xl sm:text-6xl lg:text-8xl";
    }

    return (
      <div onClick={props.customClickEvent} className={width   " "   height   " "   props.color   " "   " shadow-2xl rounded-md "   props.hidden}>
         <h1 className={text_size   " w-full h-full flex justify-center items-center text-center"}>{props.children}</h1>
        </div>)
 

Реквизит не предназначен для изменения. Другими словами, установка нового значения this.props.color не приведет к повторному отображению прямоугольника. Даже если бы это произошло, значение this в вашем обратном вызове будет для экземпляра Wall , потому что вы используете функцию со стрелкой, которая наследует ее this из окружающей области.

Одним из решений было бы, чтобы ваш компонент Wall сохранял цвет каждого прямоугольника в качестве состояния и передавал его через color prop. Затем ваш обработчик обратного вызова может изменить цвет. Однако, поскольку у вас их несколько Rectangles , вам потребуется какой-то способ различать между ними индекс или, возможно, идентификатор.

Если вам не важно Wall знать, был ли Rectangle нажат, тогда было бы проще определить обработчик щелчка внутри Rectangle и изменить его состояние в Rectangle , т.е.:

 const [color, setColor] = useState();

return (
<div onClick={() => setColor(‘new colour’)} className={width   " "   height   " "   color   " "   " shadow-2xl rounded-md "   props.hidden}>
         <h1 className={text_size   " w-full h-full flex justify-center items-center text-center"}>{props.children}</h1>
        </div>)
 

Вы пробовали переключать CSS-класс onClick ? Этот класс будет оформлен в соответствии с вашими потребностями. Единственное, что вам нужно сделать, это динамически добавить класс.