如何解决React 网站按钮和输入在智能手机上不起作用
这是一个简单的网站:
https://www.tradecalc.eu
该网站在桌面浏览器中正常工作。但它不能在智能手机上正常工作(仅适用于“计算机模式”)。不适用于所有“按钮”和“输入”。浏览器控制台中没有错误。至少我没有注意到这些。该网站使用以下内容构建:
- React(钩子)
- 反应路由器 (HashRouter)
- 引导程序:
import 'bootstrap/dist/css/bootstrap.css';
在“index.js”文件中。
最重要的“按钮”和“输入”代码:
<input
id="price"
name="price"
type="number"
step="0.01"
min="0.1"
className="form-control"
autoFocus
required
onChange={e => setPrice(e.target.value)} />
<input
id="percent"
name="percent"
type="number"
min="0"
className="form-control"
required
onChange={e => setPercent(e.target.value)} />
<select
name="currency"
id="currency"
className="form-control"
onChange={e => setCurrency(e.target.value)}>
{currencyList.map(({ label,value }) => (
<option key={value} value={value}>
{label}
</option>
))}
</select>
表单“按钮”:
<button type="submit" className="btn btn-secondary mr-2">Count</button>
<button type="reset" className="btn btn-outline-secondary" onClick={() => setCount(0)}>Reset</button>
其余的“按钮”:
<Link type="button" className="btn btn-secondary btn-sm" to="/">
Back to Trade Calc
</Link>
<a href="https://www.linkedin.com/in/" target="_blank" rel="noreferrer">
<img src={linkedin} alt="LinkedIn" />
</a>
<Link style={{ color: "red" }} to="/donation">
Make a Donation
</Link>
<Link style={{ color: "black" }} to="/privacy">
Privacy & Cookies Policy
</Link>
如果您需要更多代码,请告诉我。
解决方法
JS 没有问题,但 CSS/标记有问题。您的 Cookie 横幅与表单重叠。如果您尝试 mode
(从键盘)导航到下一个选项卡,您会看到它对您有用,但由于容器 Tab
位于表单顶部,因此您将无法在 react-cookienotice-*
字段中输入值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。