当用户在功能性反应组件中使用触摸屏时，用按钮隐藏 div

Posted 2023-03-16

【中文标题】当用户在功能性反应组件中使用触摸屏时，用按钮隐藏 div

【英文标题】：Hide div with buttons when user uses a touch screen in a functional react component

【发布时间】：2021-01-29 00:35:48

【问题描述】：

当用户使用触摸屏时，我想隐藏一个 div。是一个 react js 功能组件。

我要隐藏的 div 如下所示：

    <div className="scrollButtons">
                    <button
                        className=count <= 0 ? 'buttonLeftOpacity' : 'buttonLeft'
                        type="button"
                        onMouseDown=() => clickHandlerLeft()
                    >
                        '<'
                    </button>
                    <button className="buttonRight" type="button" onMouseDown=() => clickHandlerRight()>
                        '>'
                    </button>
                </div>
            </>

我用来感知用户是否在触摸屏上的代码是这样的：

    window.addEventListener('touchstart', function userTouch() 
        console.log(userTouch());
    );

当用户使用触摸屏时，如何使用该代码隐藏 div？ 提前谢谢！

【参考方案1】：

创建一个不会显示的类

.example 
display:none; 

然后添加这个

 window.addEventListener('touchstart', function userTouch() 
  var element = document.getElementById("scrollbuttons"); // selecting the element you want to edit, make sure to add the ID to the button if you are using this method. 
  element.classList.add("example"); //add invisible className
);

【讨论】：

嗨！感谢您的回答。我喜欢它，实际上我之前也尝试过类似的东西——而且它有效——但我不认为这感觉像是一种 React 方式。如果我只使用 javascript，可能会更多。我发布并回答了我如何用状态解决它。

没问题，什么都适合你。我很高兴你能找到几种方法来解决这个问题。继续将您的答案标记为解决方案，您能否给我的答案投票？

由于某种原因，直到明天我才能将我的答案标记为解决方案，但是您收到了赞成票！再次感谢！ ✌?

【参考方案2】：

所以，这就是我解决它的方法。通过使用 react 中的“useState”，我将 show 默认设置为 true，如果用户在触摸屏上，则设置为 false。然后，我使用该状态来显示或隐藏 touchbuttons-div，无论该值是否为真。

const [show, setShow] = useState(true);

    window.addEventListener('touchstart', function userTouch() 
        setShow(false);
    )

show ? (
                <>
                    <div className="scrollButtons" id="scrollButtons">
                        <button
                            className=count <= 0 ? 'buttonLeftOpacity' : 'buttonLeft'
                            type="button"
                            onMouseDown=() => clickHandlerLeft()
                        >
                            '<'
                        </button>
                        <button className="buttonRight" type="button" onMouseDown=() => clickHandlerRight()>
                            '>'
                        </button>
                    </div>
                </>
            ) : (
                <></>
            )