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-* 字段中输入值。