Question

我有一个react组件，其中包含一些按钮和文本输入。我想完全禁用此组件中的所有功能，直到完成其他一些工作。如何禁用整个内部组件？

Answer 1

您需要做的就是在组件上添加一个disabled道具并将其传递给内部字段，例如

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

和实施中

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

Answer 2

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

有关更多详细信息，请参见MDN Doc。

工作示例：

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' />

Answer 3

您可以添加catch道具并使用CSS禁用div

disabled

如何完全禁用React组件？

3 个答案: