如何防止用户在输入字段中键入或单击？ [反应]答案

【问题标题】：How do I prevent a user from being able to type or click in an input field? [React]如何防止用户在输入字段中键入或单击？ [反应]
【发布时间】：2022-12-09 16:59:37
【问题描述】：

有点奇怪的请求，但我正在寻找一种使输入字段完全无法交互的方法。

我有一个带有输入字段的组件，用户应该与之交互。在我的应用程序的另一个页面中，我想重用该组件的视觉效果，但他们不应该能够与之交互。

我努力了：

<input
       type="text"
       placeholder="[Click here to enter scramble you want to solve]"
       onClick={(e) => e.preventDefault()}
/>

但它没有用。

【问题讨论】：

标签： javascript html css reactjs input

【解决方案1】：

添加一个道具以根据您要使用的父组件禁用输入

<input
       type="text"
       placeholder="[Click here to enter scramble you want to solve]"
       onClick={(e) => e.preventDefault()}
      disabled={props.disabled}
/>

【讨论】：

【解决方案2】：

在输入字段中尝试只读，它可能对你有用

<input readonly type="text">

【讨论】：