javascript - 我的输入 : onChange handler is not working on mobile

Question

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

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

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

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

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

---

附加信息:

• 我使用样式化组件来创建我的输入元素
• 我使用 React Hooks 更新状态值
• 手机:iPhone Xr - iOS 12.3.1
• 测试的浏览器:Safari( WebView 和 PWA View )和 Google Chrome

---

也试过:

• 使用简单 input元素(所以没有样式化组件)
• 将类型更改为 text或 number
• 将 key 更改为 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