我的输入：onChange 处理程序不适用于移动设备答案

【问题标题】：My input: onChange handler is not working on mobile我的输入：onChange 处理程序不适用于移动设备
【发布时间】：2019-11-26 02:17:17
【问题描述】：

我正在创建一个 React.js PWA。
我有一个带有 onChange 属性的输入字段。

<input onChange={(e) => handleInput(e)} />

在我的桌面浏览器中这工作得很好，但在我的移动浏览器中似乎不会触发 onChange 处理程序。
我也试过直接alert()onChange。

<input onChange={() => alert()} />

在桌面浏览器中它也可以正常工作，但在我的移动浏览器中却不行。

其他信息：

我使用样式化组件来创建我的输入元素
我使用 React Hooks 来更新状态值
手机：iPhone Xr - iOS 12.3.1
经过测试的浏览器：Safari（网络视图和 PWA 视图）和 Google Chrome

也试过了：

使用简单的input 元素（所以没有样式化组件）
将类型更改为text 或number
将密钥更改为 100% 唯一的东西

我的代码

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';


const StyledInput = styled.input`

`;

const Input = (props) => {
    const [value, setValue] = useState('');

    useEffect(() => {
        setValue(props.value));
    }, []);

    return (
        <StyledInput
            key="key_value"
            type="tel"
            value={value}
            onChange={(e) => setValue(e.target.value)}
        />
    )
}

【问题讨论】：

需要更多信息。在什么移动浏览器上不工作？
@Karan 所有的移动浏览器。我会更新我的附加信息...
您能试试这些吗： 1. 将类型更改为文本而不是电话。 2. 使用简单输入而不是样式输入。这将告诉我们是样式组件问题还是反应问题。
当然，在我的浏览器中应该没关系。它应该适用于每个浏览器...
@Karan 也尝试了这些操作；）

标签： javascript reactjs react-hooks styled-components

【解决方案1】：

我发现问题出在哪里了。

我有一个css-reset.css，它会重置每个浏览器中的 CSS。

我有：

 * { 
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

不要这样做！ xD

【讨论】：