当我单击它时，如何防止按钮触发另一个按钮？ 反应

Question

我的问题是当我单击我的监视按钮时，它也会触发处理程序按钮。 我怎样才能防止这种情况？

这是我的按钮代码：HTML：

<div className="bot">
                <button id="handler" onClick={() =>{handleClick(0)}}>PICK IT</button>

                <button id="watched" onClick={() =>{watched()}}>I Already Watched This</button>

                <a href={data.trailer} target = "_blank" className = "button">WATCH TRAILER</a>
               

            </div>

反应和 Firebase 部分：

function watched(){
        const db = getDatabase(app);
        update(ref(db,"users/" + userInfo + "/watched/" + data.id),{"watched" : "true"});
    } 

    function handleClick(val){
        if (val >= 250){return 1;}
        const numberOfUsers = 250;
        const randomIndex = Math.floor(Math.random() * numberOfUsers);
        const database = getDatabase(app);
        const watched = ref(database,"users/" + userInfo + "/watched/" + randomIndex);
        onValue(watched,(snapshot) =>{
            if (snapshot.val().watched === "true"){
                handleClick(val+1)
            }
            else{
                const starCountRef = ref(database, 'movies/');
                onValue(starCountRef, (snapshot) => {
                const data = snapshot.val();
                setData(data[randomIndex])
            });}
        })
        

Answer 1

我解决了这样的问题：

function handleClick(val){
        console.log("handlerrr");
        if (val >= 250){return 1;}
        const numberOfUsers = 250;
        const randomIndex = Math.floor(Math.random() * numberOfUsers);
        const database = getDatabase(app);
        const watched = ref(database,"users/" + userInfo + "/watched/" + randomIndex);
        onValue(watched,(snapshot) =>{
            const val = snapshot.val()  <-------- THIS LINE ADDED
            if (val === "true"){
                handleClick(val+1)
            }
            else{
                const starCountRef = ref(database, 'movies/');
                onValue(starCountRef, (snapshot) => {
                const data = snapshot.val();
                setData(data[randomIndex])
            });}
        })

我不确定，但可能问题是当 onValue 工作之后，我的 handleClick function 正在监听我的数据库，并且在我的数据库每次更新后它都会触发。 所以我添加了 const val = snapshot.val() 现在它只渲染了 1 次。

Answer 2

只需在 onClick function onClick={(e) =>{handleClick(e, 0)}中添加事件。 添加此事件将防止在没有实际点击的情况下触发按钮。