禁用语义按钮的反应

Question

如何动态地设置语义按钮，在残疾人反应：

<Button disabled>click here<Button> 

我tryed与状态设置，但它给了我一个错误

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

Answer 1

这是不可能告诉您的Button如何在引擎盖下处于禁用状态，但假设它像JSX元素一样工作。

首先，JSX元素只是接受一组参数（道具）的函数。所以你仍然需要给它一个禁用：布尔值。正如你在下面看到的，你需要提供一个名字和一个值。您在{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>