Реактивные крюки с рамой

Question

У меня довольно красивый вопрос c. Я пытаюсь найти правильный рабочий процесс для работы с a-frame и React. Я привык использовать крючки и вроде застрял с добавлением событий. Что я делаю здесь не так, в настоящее время я не могу вызвать handleClick:

import React from "react";
import "aframe";
import "./App.css";
function App() {
    const [state, setState] = React.useState(false);
    function handleClick(e) {
        e.preventDefault();
        setState(!state);
        console.log("Clicked");
    }
    // console.log("bzzt");
    return (
        <div className="App">
            <a-scene id="updateMe">
                <a-camera>
                    <a-cursor></a-cursor>
                </a-camera>
                <a-cylinder
                    position="1 2 -2"
                    color={state ? "red" : "blue"}
                    events={{
                        click: (e) => handleClick(e),
                    }}
                />
            </a-scene>
        </div>
    );
}
export default App;

Answer 1

Вот решение, которое работает, я должен использовать aframe-реагировать:

import React from "react";
import "aframe";
import { Entity, Scene } from "aframe-react";
import "./App.css";
function App() {
    const [state, setState] = React.useState(false);
    const handleClick = () => {
        setState(!state);
        console.log("Clicked");
    };
    return (
        <div className="App">
            <Scene id="updateMe">
                <a-camera>
                    <a-cursor></a-cursor>
                </a-camera>
                <Entity
                    geometry={{ primitive: "box" }}
                    material={{ color: `${state === true ? "red" : "blue"}` }}
                    position={{ x: 0, y: 0, z: -5 }}
                    events={{
                        click: () => handleClick(),
                    }}
                />
            </Scene>
        </div>
    );
}
export default App;