根据变量将输入设置为禁用答案

【问题标题】：Set input on disabled based on a variable根据变量将输入设置为禁用
【发布时间】：2021-01-17 08:52:08
【问题描述】：

拥有一个正常的输入表单，很容易将其禁用：

<input
  {...field}
  as={Input}
  disabled={disableInput}
  className="my-class"
  placeholder="write data"
  value={...}
/>

但是，如果输入具有不同的结构，例如：

  <input
    {...getInputProps({
      placeholder: 'write data',
      className: 'my-class',
    })}
  />

我尝试了几种方法，但都没有奏效。一种方法是在顶层添加 disabled 属性，另一种方法是在 getInputProps 中添加它，它们都不起作用。

  <input
    disabled={disableInput}
    {...getInputProps({
      placeholder: 'write data',
      className: 'my-class',
    })}
  />

或

  <input       
    {...getInputProps({
      disabled={disableInput}
      placeholder: 'write data',
      className: 'my-class',
    })}
  />

有什么想法吗？

【问题讨论】：

【解决方案1】：

基于Thomas Kuhlmann 的评论。解决方案是在里面添加 disabled 属性，但不像disabled={disabledInput}。正确的方式是disabled: disabledInput。

  <input       
    {...getInputProps({
      disabled: disabledInput
      placeholder: 'write data',
      className: 'my-class',
    })}
  />

【讨论】：