我正在创建一个 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)}
/>
)
}
最佳答案
我找到了问题所在。
我有一个 css-reset.css
可以在每个浏览器中重置 css。
我有:
* {
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
不要这样做! xD
关于javascript - 我的输入 : onChange handler is not working on mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57072594/