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（网络视图和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处理程序不适用于移动设备

1 个答案: