React中如何让输入框完全不可输入与点击？

你之前用onClick={(e) => e.preventDefault()}没用是因为输入框的交互不止点击这一种——用户还能通过Tab键聚焦、键盘输入、右键操作等，只拦截点击事件根本拦不住所有交互。下面是几种靠谱的实现方式：

• 原生disabled属性（最简单）
  浏览器原生支持的禁用属性，会自动阻止所有交互（聚焦、输入、点击等），还自带禁用样式（默认灰化）。代码示例：

  <input
    type="text"
    placeholder="[Click here to enter scramble you want to solve]"
    disabled
  />
  

  要是不想用默认的灰化样式，自己写CSS覆盖opacity、color这些属性就行。

• readonly+CSS组合（保留原样式）
  readonly只是禁止输入，但用户仍能聚焦、选中文本，所以要配合CSS彻底锁死交互：

  <input
    type="text"
    placeholder="[Click here to enter scramble you want to solve]"
    readonly
    style={{ pointerEvents: 'none', userSelect: 'none' }}
  />
  

  pointerEvents: none阻止所有鼠标/触摸交互，userSelect: none禁止选中文本，这样既保留输入框原样式，又完全不能交互。

• 纯CSS控制（不修改属性）
  直接给输入框加pointerEvents: none，阻止所有点击类交互；再加tabIndex="-1"，让输入框无法通过Tab键聚焦：

  <input
    type="text"
    placeholder="[Click here to enter scramble you want to solve]"
    style={{ pointerEvents: 'none' }}
    tabIndex="-1"
  />
  

  这种方式适合不想改动input原有属性的场景。

内容的提问来源于stack exchange，提问作者713sean