在反应中禁用语义按钮答案

【问题标题】：disable semantic Button in react在反应中禁用语义按钮
【发布时间】：2018-06-22 22:42:33
【问题描述】：

如何在反应中动态地将语义按钮设置为禁用：

<Button disabled>click here<Button>

我试图用状态设置它，但它给了我一个错误

this.setState({d:'disabled'})
return (<Button {this.state.d} >click here<Button>)

【问题讨论】：

使用这个：return (<Button disabled={this.state.d}> click here <Button>)

标签： reactjs properties semantic-ui semantic-ui-react

【解决方案1】：

不可能知道你的 Button 在后台是如何处理禁用的，但假设它像 JSX 元素一样工作。

首先，JSX 元素只是接受一组参数（props）的函数。所以你仍然需要给它一个 disabled:boolean。正如您在下面看到的，您需要提供名称和值。您对 {this.state.d} 的尝试只给出了真/假值。请查看下面的 sn-p 以了解如何操作。要么是显式的，要么是给它一个命名的变量，或者最后是散布一个对象。

class HelloWorldComponent extends React.Component {
  constructor(){
    super();
    this.state = {
      disabled: true
    }
  }
  render() {
  const disabled = this.state.disabled; //Pull out the value to a named variable
    return (  
    <div>
      <button disabled={false}>Button1</button> 
      <button disabled>Button2</button> 
      <button {...this.state}>Button3</button>  
    </div>
    );
  }
}

React.render(
  <HelloWorldComponent/>,
  document.getElementById('react_example')
);

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

【讨论】：