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

Question

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

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

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

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

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

附加信息：

我使用样式化组件创建我的输入元素
我使用 React Hooks 更新状态值
Phone: 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)}
        />
    )
}

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

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

My input: onChange handler is not working on mobile

javascript

reactjs

styled-components

react-hooks