我的输入:onChange 处理程序在移动设备上不起作用

Question

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

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

在我的

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

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

同样，在桌面浏览器中它工作得很好，但在我的移动浏览器中却没有。

---

附加信息：

• 我使用样式化组件来创建我的输入元素
• 我使用 React Hooks 来更新状态值
• 手机： 苹果手机 - iOS 12.3.1
• 测试的浏览器：Safari(web-view和PWA-view(和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)}
        />
    )
}

Answer 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