如何在 React 中有条件地使输入框只读答案

【问题标题】：How to make input box readonly conditionally in React如何在 React 中有条件地使输入框只读
【发布时间】：2021-12-21 19:26:02
【问题描述】：

如何有条件地将输入框设为只读？我有一个要检查的状态值，如果它为空，我希望将 readonly 的输入框道具添加到输入框中。到目前为止，这是我的实现：

<Input title={ 'Node Type'} name={ 'nodeType'} inputtype={ 'text'} placeholder={ 'Type node type name'} readonly={this.props.updateCards === {}} />

*编辑问题说我想根据评论回复检查它是否为空而不是真实

【问题讨论】：

this.props.updateCards 永远不会=== {}。你想检查它是否为空吗？或者如果它是其他一些价值？
对不起，我的意思是如果它是空的。我把我的问题表述错了。它的默认状态是空的，当我希望将只读道具添加到输入框时就是这种情况

标签： javascript reactjs inputbox

【解决方案1】：

你可以这样做：

<Input readonly={this.props.updateCards ? true : false} />

【讨论】：

对不起，我的意思是当 props.updateCards 为空时，不是真的。

【解决方案2】：

如果它是空的，你可以像下面这样使用它。有关isEmpty 的实现，请参阅：this question

return (
    <Input
      title={ 'Node Type'} 
      name={ 'nodeType'} 
      inputtype={ 'text'}
      placeholder={ 'Type node type name'} 
      readonly={isEmpty(this.props.updateCards)} 
    />
)

【讨论】：