在反应中禁用语义按钮

Question

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

<Button disabled>click here<Button>

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

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

Answer 1

不可能说出你的 Button 如何在引擎盖下处理禁用，但假设它像 JSX 元素一样工作。

首先，JSX 元素只是接受一组参数 (props) 的函数。所以你还是需要给它一个disabled:boolean。正如您在下面看到的，您需要提供一个名称和一个值。您对 {this.state.d} 的尝试只给出了值 true/false。请查看下面的代码片段，了解如何操作。显式或通过给它一个命名变量或最终通过展开一个对象。

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>

在反应中禁用语义按钮

disable semantic Button in react

properties

reactjs

semantic-ui

semantic-ui-react