如何完全禁用React组件？

Question

我有一个React组件，其中包含一些按钮和文本输入框。在完成某些其他工作之前，我希望完全禁用此组件中的所有内容。如何使整个内部组件不可用？

- hearty

---

禁用？为什么不隐藏？ - Nuru Salihu

如果是这种情况，你为什么还要展示它呢？ - Siya Mzam

我想展示它..设计要求..但只是低不透明度，但点击不应该对那个div起作用。 - hearty

Answer 1

你可以添加disabled属性并使用CSS禁用div。

const MyComponent = ({disabled}) => {
    return (
        <div style={disabled ? {pointerEvents: "none", opacity: "0.4"} : {}}>
            <h1> Text</h1>
            <input type="text"/>
            <input type="password"/>
            <button>Login</button>
        </div>
    )
}

- Karo Hovhannisyan

---

谁能想到答案是CSS呢？谢谢，伙计！ - Brandon Howard

你这段时间都在哪里呢。 它运行得非常好。 花了几个小时来寻找完美的解决方案。 非常感谢。 - Alok Ranjan

您能否通过键盘导航到输入字段并输入内容？ - noBillSide

不是一个很好的答案。用户仍然可以通过键盘导航到控件并使用它们。 - Neo

Answer 2

最好使用form和fieldset，并将所有的输入/按钮元素放在其中。您可以通过将disabled属性设置为fieldset来禁用它们中的所有元素。

有关更多详细信息，请参阅MDN文档。

工作示例：

class App extends React.Component {
  constructor () {
    super()
    this.state = { disable: false }
  }
  
  toggleDisable = () => this.setState(prevState => ({disable: !prevState.disable}))
  
  buttonClick = (e) => {
    e.preventDefault();
    console.log('button clicked');
  }
  
  render (){
    return (
      <div>
        <button className='toggle' onClick={this.toggleDisable}>Toggle Disable</button>
        <form>
          <fieldset disabled={this.state.disable}>
            <input />
            <button onClick={this.buttonClick}>Button</button>
          </fieldset>
        </form>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

.toggle {
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />

- Mayank Shukla

---

请注意，即使在IE11中输入框呈灰色，您仍然可以在其中输入文字（存在bug）。 - Caramiriel

比目前得票最高的答案好多了。这个可以真正地禁用键盘交互。 - Neo

Answer 3

您可以使用禁用属性模式来解决问题。

const App = () => {
  return (
    <div>
      <SomeComponent disabled />
    </div>
  );
};

const SomeComponent = ({ disabled = false }) => {
  return (
    !disabled && (
      <div>
        <h2>Disable SomeComponent to see magic happen!</h2>
      </div>
    )
  );
};

- Aravinda Meewalaarachchi

Answer 4

你所需要做的就是在组件上添加一个disabled属性，然后将其传递给内部字段，例如：

<MyComponent disabled={shouldComponentBeDisabled} {...otherProps} />

并在实现中

const MyComponent = ({disabled}) => {
    return <div>
          <button disabled={disabled}>someBtn</button>
          <input type="text" disabled={disabled}/>
    </div>
}

- Shubham Khatri

---

这样做会太困难了..我有很多按钮和输入框..能否对在子元素中呈现的整个div执行此操作？ - hearty

不幸的是，在React中，以上是你所能做到的最好的，但是可以使用jquery完成相同的事情。然而，不建议在React中使用jquery。 - Shubham Khatri