如何使用 React 使文本输入不可编辑？

Question

我搜索了这个，我找到的最接近的是这个 SO post here；但是，它不使用 React。

我在 React 组件中尝试了下面的语法：

  <input 
    value={props.value}
    onChange={props.onChange} 
    className={props.className}
    placeholder={props.placeholder}
    name={props.name} {props.readonly && 'readonly'}>

但是我得到一个 eslint 解析错误，当我检查 UI 它仍然是可写的。

Answer 1

当 props.readonly 为 true 时，您可以有一个没有 onChange 的 input。像这样：

<input 
    value={props.value}
    onChange={props.readonly ? undefined : props.onChange} 
    className={props.className}
    placeholder={props.placeholder}
    name={props.name}
/>

Answer 2

删除{props.readonly && 'readonly'} 并添加 readonly={props.readonly} 只读属性说明参见 here。

你的问题是输入元素（和所有反应组件）只接受 key/value 对形式的 key={value}，但你试图插入一些 javascript 代码没有将结果的值分配给键。

编辑：应该使用只读属性，而不是禁用，如评论中所述。

Answer 3

使用属性 readOnly 并传递一个布尔值

const Example = (props) => {
  return (    
      <input readOnly={props.readonly} value={props.title}/>   
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" readonly={true}/>,
  document.getElementById("react")
);

[readonly] {color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 4

您使用的答案不规范。

而不是使用

 ... readonly>

使用更常见的 HTML 语法如下：

readonly='readonly'

然后选择一种在 React / JSX 中实现的方法。

如何使用 React 使文本输入不可编辑？

How can I make a text input non editable with React?

javascript

jsx

reactjs

eslint